<!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. Python_单元测试

    Stack.py class Stack: def __init__(self, size = 10): self._content = [] #使用列表存放栈的元素 self._size = siz ...

  2. IntelliJ IDEA maven 构建简单springmvc项目

    环境: apache-tomcat-8.5.15 jdk1.8.0_172 IDEA 建立一个maven-webapp项目:Create New Project 后点击next 然后next 可以选择 ...

  3. PAT1101:Quick Sort

    1101. Quick Sort (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CAO, Peng There is a ...

  4. apache2.4 虚拟主机配置

    网上教程很多,仅记录我的配置,可供参考 一.修改httpd.conf 打开appserv的安装目录,找到httpd.conf文件,分别去掉下面两行文字前面的#号. #LoadModule vhost_ ...

  5. 第三章——分类（Classification）

    3.1 MNIST 本章介绍分类,使用MNIST数据集.该数据集包含七万个手写数字图片.使用Scikit-Learn函数即可下载该数据集: >>> from sklearn.data ...

  6. Day3 《机器学习》第三章学习笔记

    这一章也是本书基本理论的一章,我对这章后面有些公式看的比较模糊,这一会章涉及线性代数和概率论基础知识,讲了几种经典的线性模型,回归,分类(二分类和多分类)任务. 3.1 基本形式 给定由d个属性描述的 ...

  7. sql server 高可用故障转移(6)

    创建分布式事务处理DTC群集服务 在hsr3 ip 49上继续 \ 输入一个没有冲突的ip地址用作SQL-CL的DTC解析地址:192.168.2.110,通过检测后会在DNS服务器中自动创建一条记录 ...

  8. Requests库作者另一神器Pipenv的用法

    前言 我们在运行 Python 项目的时候经常会遇到一些版本问题,例如 A 项目依赖于 Django 1.5,而 B 项目又依赖 Django 2.0,而我们的系统却只有一个 Python 解释器,我 ...

  9. 利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)

    对WebElement截图 WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素.若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了. WebDriver.Phant ...

  10. error.go源码笔记

    ] {     case errorCodeConnFailed:         return ErrConnectionFailed(err)     case errorCodeHttpServ ...