<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

</head>

<body>

    <div style="border: 1px solid #ddd; width: 600px; position: absolute;">

        <div id="title" style="background-color:black;height:40px; color: white;">

            标题

        </div>

        <div style="height: 300px;">

            内容

        </div>

    </div>

</body>

<script>

    $("#title").mouseover(function(){

        $(this).css("cursor","move")

    }).mousedown(function (event){

        var start_x=event.screenX;

        var start_y=event.screenY;

        var parent_left=$(this).parent().offset().left;

        var parent_top =$(this).parent().offset().top;

        $(this).on("mousemove", function(e){

            var new_x=e.screenX;

            var new_y=e.screenY;

            var new_parent_x=parent_left+(new_x-start_x);

            var new_parent_y=parent_top+(new_y-start_y);

            $(this).parent().css("left", new_parent_x+"px");

            $(this).parent().css("top", new_parent_y+"px");

        }).mouseup(function(){

            $(this).off("mousemove")

        })

    })

</script>

</html>

HTML 练习拖动面板的更多相关文章

  1. JS / jquery 实现页面 面板拖动 QQ网页版登陆页面拖动

    参考:慕课网DOM实践探秘 http://www.imooc.com/learn/138 实现需求:点击页面头部,可以拖动面板.使用js原生和jquery 各实现一次. 可以学到:1.鼠标在当前页面的 ...

  2. WPF-拖动面板移动窗口&设置窗口状态

    在需要去掉窗口边框的情景下往往需要有拖动面板直接移动窗口和自定义按钮改变窗口状态和关闭的功能 拖动面板移动窗口 为面板控件添加MouseMove事件, 面板控件指的是用来当面板的控件,可以是grid. ...

  3. Jquery 实现层的拖动，支持回调函数

    最近在写一个CMS内容管理系统,前台基本是用ajax异步请求服务器,通过ashx处理,返回json格式处理.由于需要更加人性化的界面,所以采用到了拖动层的操作. 以下是拖动层的主要核心方法,本来想写成 ...

  4. 十分钟玩转 jQuery、实例大全

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产 ...

  5. 前端之jquery

    前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...

  6. 【jquery】基础知识

    jquery简介 1 jquery是什么 jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后 ...

  7. jquery简介和实例

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. 参考:http://www.php100 ...

  8. JQurey

    jQuery 是一个 JavaScript 库.极大地简化了 JavaScript 编程,很容易学习. jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML ...

  9. jQuery基本操作

    jQuery简介 jQuery是一个兼容多浏览器的javascript库,极大地简化了 JavaScript 编程,核心理念是write less,do more(写得更少,做得更多),对javasc ...

随机推荐

  1. i++ 和 ++i；&& 和 &

    一.算数运算符(自增运算符i++.自减运算符i++)  ※  i++是先赋值(计算)再加1 :++i是先加1再赋值(计算) : int m = 5; boolean bool = ++m > 5 ...

  2. day13_Mysql事务与数据库连接池学习笔记

    一.Mysql事务 事务: 事务指逻辑上的一组操作,组成这组操作的各个单元,要么全部成功,要么全部不成功(数据回滚).  例如:A给B转帐,对应于如下两条sql语句 : update account ...

  3. unity3d学习路线

    自学游戏开发难不难?小编在这里告诉你:你首先要做的是选择一门开发语言,包括Basic,Pascal,C,C++,等等.也经常会有人争论对于初学者哪门语言更好.对于这一系列流行语言的讨论,我的建议是以C ...

  4. 【java错误】Non-terminating decimal expansion; no exact representable decimal result

    问题描述 意思是“无法结束的除法表达式:没有精确的除结果”.当时输入的10/3,结果应该是3.3333....333. 下面这种处理方式有问题. BigDecimal num3 = new BigDe ...

  5. 数组、ArrayList、List、LinkedList的区别

    一.数组 数组在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. 1.一维数组 声明一个数组: ]; 初始化一个数组: ] { , , , , }; //定长 声明并初始化: ...

  6. 关于maven的配置使用 这一篇还比较全 2017.12.13

    https://www.cnblogs.com/tangshengwei/p/6341462.html

  7. 点击<a>页面跳转解决办法/跨域请求，JSONP

    有些时候做的东西刚好要用到链接,但又不需要去链接,只需要对onclick事件进行处理,但它却这样子写 <a href="#" onclick="gettext()& ...

  8. ORA-12737: Instant Client Light: unsupported server character set CHS16GBK

    当使用Navicat Premiun 英文版连接oracl时可能会报ORA-12737: Instant Client Light: unsupported server character set ...

  9. Struts2(一)---struts2的环境搭建及实例

    刚刚接触struts2,有点懵懵懂懂,还是习惯于先写代码,然后慢慢来理解其中的思想. 这篇文章主要内容是strusts的环境搭建及通过一个简单的例子来理解到底是怎么使用struts来简化编程的. 1. ...

  10. SimpleXML系列函数操作XML

    创建SimpleXML对象 种方法来创建对象,分别是: l  Simplexml_load_file()函数,将指定的文件解析到内存中. l  Simplexml_load_string()函数,将创 ...