<!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. 数据结构和算法总结（一）：广度优先搜索BFS和深度优先搜索DFS

    前言 这几天复习图论算法,觉得BFS和DFS挺重要的,而且应用比较多,故记录一下. 广度优先搜索 有一个有向图如图a 图a 广度优先搜索的策略是: 从起始点开始遍历其邻接的节点,由此向外不断扩散. 1 ...

  2. 解决Ubuntu系统下的VMware Workstation无法打开虚拟网络编辑器界面的问题

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=630 操作环境: Ubuntu 17 VMware 14 pro for Linux 问题描述: 我在Ubuntu ...

  3. TensorFlow 常用函数汇总

    本文介绍了tensorflow的常用函数,源自网上整理. TensorFlow 将图形定义转换成分布式执行的操作, 以充分利用可用的计算资源(如 CPU 或 GPU.一般你不需要显式指定使用 CPU ...

  4. aliyun TableStore相关操作汇总

    总结:这个东西本身可能技术还不成熟,使用的人少,有问题很验证解决 遇到的问题:(1)没有一个GUI工具,使用门槛高(2)查询的GetRange不方便,把查询出来的数据使用System.out.prin ...

  5. 解决Android模拟器卡慢的问题

    解决Android模拟器卡慢的问题 本文介绍使用Intel HAXM技术为Android模拟器加速,使模拟器运行速度媲美真机. Intel HAXM(Hardware Accelerate Execu ...

  6. mongodb的设计特征

    MongoDB 的设计目标是高性能.可扩展.易部署.易使用,存储数据非常方便.其主要功能特性如下.   (1)面向集合存储,容易存储对象类型的数据.在MongoDB 中数据被分组存储在集合中,集合类似 ...

  7. 玩转spring MVC(八)----spring MVC整合json

    这篇文章在前边项目的基础上来整合json,最新项目资料见:http://download.csdn.net/detail/u012116457/8436187 首先需要的jar包:jackson-co ...

  8. MyEclipse代码提示设置

    (一)普通代码提示 1. 打开MyEclipse ,然后"window"→"Preferences" 2. 选择"java",展开,&quo ...

  9. html5中viewport与meta详解

    网上解释手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中 ...

  10. Prometheus监控数据格式学习

    本文大纲: • prometheus metrics的概念• k/v的数据形式• prometheus exporter的使⽤(pull形式采集数据)• prometheus pushgateway的 ...