本文主要写一下如何实现dom元素拖动，目前使用jquery库实现之。

主要的注释附在代码中，大家可以根据代码画一个小的窗口模型图，以便于理解。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>实现dom元素拖动</title>

     <style>

         .dialog {

             position: absolute;

             top: 0;

             left: 0;

             width: 500px;

             height: 400px;

             background-color: blue;

         }

     </style>

     <script src="js/jquery-1.7.2.js"></script>

 </head>

 <body>

     <div class="dialog dialog-drag">拖动</div>

     <script>

         (function($) {

             var windowWidth,

                 windowHeight,

                 mouseToDialogX,

                 mouseToDialogY,

                 dialogWidth,

                 dialogHeight;

             var $target,

                 $doc = $(document);

             var _move = function(e) {

                 var nowTop,

                     nowLeft,

                     pageX = e.pageX,

                     pageY = e.pageY;

                 // top

                 // 界限值：当对话框拖动到上边界时，将top置为0

                 if (pageY - mouseToDialogY < 0) {

                     nowTop = 0;

                 }

                 // 界限值：当对话框拖动到下边界时，将top置为(窗口高度-对画框高度)，即将对话框底部与页面平齐

                 else if (dialogHeight + (pageY - mouseToDialogY) > windowHeight) {

                     nowTop = windowHeight - dialogHeight;

                 }

                 // 正常值：鼠标纵向坐标-鼠标纵向坐标与对话框上边缘的距离

                 else {

                     nowTop = pageY - mouseToDialogY;

                 }

                 // left - 解释同上

                 if (pageX - mouseToDialogX < 0) {

                     nowLeft = 0;

                 } else if (dialogWidth + (pageX - mouseToDialogX) > windowWidth) {

                     nowLeft = windowWidth - dialogWidth;

                 } else {

                     nowLeft = pageX - mouseToDialogX;

                 }

                 $target.css({

                     left: nowLeft,

                     top: nowTop

                 });

             };

             // 拖动开始

             $doc.on('mousedown', '.dialog-drag', function (e) {

                 var $this = $(this),

                     $win = $(window);

                 $target = $this;

                 windowWidth = $win.width();

                 windowHeight = $win.height();

                 mouseToDialogX = e.pageX - $this.offset().left;

                 mouseToDialogY = e.pageY - $this.offset().top;

                 dialogWidth = $this.width();

                 dialogHeight = $this.height();

                 // 只有对话框拖动时，才会有mousemove事件

                 $(document).on('mousemove', _move);

             });

             // 拖动结束

             $doc.on('mouseup', '.dialog-drag', function (e) {

                 $target = null;

                 // 当拖动结束时， 解绑mousemove事件

                 $(document).off('mousemove', _move);

             });

         })(jQuery);

     </script>

 </body>

 </html>

实现dom元素拖动的更多相关文章

  1. 设置dom元素可拖动，支持ie5+

    摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Fi ...

  2. 关于Cefsharp无法拖动Dom元素的解决方法

    如图所显示,Cefsharp在嵌入网页,页面有对Dom元素的拖动的操作,独立在浏览器上对网页元素的拖动是没有问题的,但是嵌入到Cefsharp上显示禁用的图标.排查了H5的代码,没有写入禁用拖动的操作 ...

  3. 判断DOM元素是否出现再浏览器窗口中

    几乎所有的项目都要解决这样一个问题:判断一个元素是否出现在浏览器窗口中?因为通过它我们可以极大的优化项目的性能,进而提升用户的的体验.原生javasxript获取浏览器的滚动距离和可视窗口的高度 使用 ...

  4. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  5. JQuery利用sort对DOM元素进行排序

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...

  6. html标签属性（attribute）和dom元素的属性（property）

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  7. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  8. 如何隐藏DOM元素

    在CSS中,要隐藏DOM元素常见的方法有: 设置元素的opacity值为0 设置元素的visibility值为hidden 设置元素的display值为none 设置元素的position值为abso ...

  9. HTML DOM元素的Dragdrop

    在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的ja ...

随机推荐

  1. newinstance和new有什么区别

    用newInstance与用new是区别的,区别在于创建对象的方式不一样,前者是使用类加载机制,那么为什么会有两种创建对象方式?这个就要从可伸缩.可扩展,可重用等软件思想上解释了.Java中工厂模式经 ...

  2. IOS基础之 (八) Foundation框架

    一 常用类 NSRange 范围,NSPoint  点,NSSize /CSSize 大小,CGRect 1 NSRange 1)NSRange是一种C语言结构用来帮助描述一系列的条款,包括一个起点位 ...

  3. CodeForces 705B (训练水题)

    题目链接:http://codeforces.com/problemset/problem/705/B 题意略解: 两个人玩游戏,解数字,一个数字可以被分成两个不同或相同的数字 (3可以解成 1 2) ...

  4. web.xml文件中的web-app元素 部署

    [转载]web.xml文件中的web-app元素 (2012-05-24 13:35:57) 转载▼ 标签: 转载 分类: java 挺全 的 呵呵呵 转了 原文地址:web.xml文件中的web-a ...

  5. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

  6. 获取JDBC中的ResultSet的记录的条数

    方法一:利用ResultSet的getRow方法来获得ResultSet的总行数 Java代码 ResultSet rs; rs.last(); //移到最后一行 int rowCount = rs. ...

  7. DataTable中如何去除重复的项

    DataView dv =dataTable.DefaultView; DataTable dt = dv.ToTable(true, "Name");

  8. GDB中应该知道的几个调试方法 来自陈皓

    GDB中应该知道的几个调试方法 2011年2月10日陈皓发表评论阅读评论62,325 人阅读   七.八年前写过一篇<用GDB调试程序>,于是,从那以后,很多朋友在MSN上以及给我发邮件询 ...

  9. ubuntu系统自带的火狐（firefox）如何安装Adobe Flash

    当你刚装完系统,发现打开某些网站时,提示你“需要安装flash”,然后你点击确定,过了一会,提示你安装失败. 我也是遇到这种情况.我第一个反应是,我先不用firefox,我安装chrome. 可是当你 ...

  10. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...