<!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. React入门一

    React.js算是当今主流框架之一了,好多公司项目都是React.直接上图: 所以最近整合一些论坛,今儿咱就说说React, React 是一个用于构建用户界面的 JAVASCRIPT 库. Rea ...

  2. Spring Boot实战笔记（二）-- Spring常用配置（Scope、Spring EL和资源调用）

    一.Bean的Scope Scope描述的是Spring容器如何新建Bean实例的.Spring的Scope有以下几种,通过@Scope注解来实现. (1)Singleton:一个Spring容器中只 ...

  3. SSM-SpringMVC-09：SpringMVC中以继承MutiActionController类的方式实现处理器

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- MutiActionController类,多行动处理器,简单来说,就是可以一个处理器中有多个处理方法,分支 ...

  4. python环境搭建-requests的简单安装（适合新手）

    安装完python之后,一定要记住安装后的路径.这是我当前的路径. 下面是requests的安装步骤: 我们这里直接用pip安装(这样比较适合新手),新版python自带pip,python3.6.1 ...

  5. GMT与Etc/GMT地区信息的时区转换

    GMT 地区信息的时区 在将来的版本中可能不再支持以下左面一列中的地区信息的时区.可能从 /usr/share/lib/zoneinfo 删除这些文件.左列中的地区信息的时区用右列中对等的时区来替换. ...

  6. Javascript继承，再谈

    说到Javascript的继承,相信只要是前端开发者都有所了解或应用,因为这是太基础的知识了.但不知各位有没有深入去理解其中的玄机与奥秘.今本人不才,但也想用自己的理解来说一说这其中的玄机和奥秘. 一 ...

  7. titanium环境配置

    ###### **工具:** > * [titanium studio](http://www.appcelerator.com/product/) > * [node.js](https ...

  8. 关于Google 圆角 高光 高宽 自适应 按钮

    最近看了张鑫旭老师关于Google搜索按钮的博客,感觉启示颇多.下面我就详说一下这个按钮的代码,由于W3C新版本的更新,之前的代码会有部分累赘, 在此,我做了些修改.当然,想观摩原版的可以,狠狠的戳链 ...

  9. 聊一聊promise的前世今生

    promise的概念已经出现很久了,浏览器.nodejs都已经全部实现promise了.现在来聊,是不是有点过时了? 确实,如果不扯淡,这篇随笔根本不会有太多内容.所以,我就尽可能的,多扯一扯,聊一聊 ...

  10. Python web简约表白网页源码分享，时光不老，我们不散！

    演示站:c.lmz8.cn打开js/4.js,复制到工具箱的js代码整理那,先解密,方便查看.工具箱:tool.lmz8.cnjs代码整理.在线解码 这个便是文字,只不过呗转码了,所以要用到解码工具. ...