<!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>鼠标拖拽定位元素</title>

     <style>

     #box {

         width: 100px;

         height: 100px;

         background-color: aquamarine;

         position: absolute;

     }

     </style>

 </head>

 <body>

     <div id="box"></div>

     <script type="text/javascript">

     var oDiv = document.getElementById("box");

     oDiv.onmousedown = function(ev) {

         var oEvent = ev;

         var disX = oEvent.clientX - oDiv.offsetLeft;

         var disY = oEvent.clientY - oDiv.offsetTop;

         document.onmousemove = function(ev) {

             oEvent = ev;

             oDiv.style.left = oEvent.clientX - disX + "px";

             oDiv.style.top = oEvent.clientY - disY + "px";

         }

         document.onmouseup = function() {

             document.onmousemove = null;

             document.onmouseup = null;

         }

     }

     </script>

 </body>

 </html>

原理：根据 absolute 定位结合鼠标事件实现对元素的拖动定位。

DOM元素各种尺寸和窗口的各种尺寸详解：详见下图

鼠标拖拽定位和DOM各种尺寸详解的更多相关文章

  1. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  2. 一个全新的Vue拖拽特性实现：“调整尺寸”部分

    关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对调整尺寸的开发进行阐述 关于移动的开发,请参见:拖拽:移动 演示 开发步骤 下面以模块test-party为例, ...

  3. CSharpGL(20)用unProject和Project实现鼠标拖拽图元

    CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...

  4. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  5. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  6. 【狼】unity 鼠标拖拽物体实现任意角度自旋转

    主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向(x轴)移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向(y轴)移动增量 通过勾股定理获取拖拽长 ...

  7. NGUI对象跟随鼠标拖拽移动

    public Camera WNGUICamera; Vector3 _WoldPosition;//指针的初始位置 // Vector3 _WoldAng; Vector3 WscreenSpace ...

  8. Arcgis for qml - 鼠标拖拽移动

    以实现鼠标拖拽文本图层为例 GitHub:ArcGIS拖拽文本 作者:狐狸家的鱼 目的是利用鼠标进行拖拽. 实现两种模式,一种是屏幕上的拖拽,第二种是地图上图层的挪动. 屏幕上的拖拽其实跟ArcGIS ...

  9. html5的鼠标拖拽

    鼠标拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. 《重构》中Tips总结

    1         如果你发现自己需要为程序添加一个特性,而代码结构使你无法很方便地达到目的,那就先重构那个程序,使特性的添加比较容易进行,然后再添加特性. 2         重构之前,首先检查自己 ...

  2. Linux 之归档与压缩

    首先我们思考一下,归档和解压是一个概念吗?答案很明显不是啊,所谓归档,就是将一些文件归到一起,并没有对其进行压缩的操作.然而压缩则不同,见名知意.下面我们就来深入的研究一下这两个知识点吧! ----- ...

  3. QT Mobile: 一统IOS/Andriod/WP/等移动平台的江湖

    笔者在研究生阶段做了2年的QT开发,那时候QT在嵌入式的图形开发中非常火,当时Nokia在智能机的份额还是第一.想当年,Nokia从Trolltech的手中收购了QT,当时大家还在例会上讨论QT终于不 ...

  4. 手机广告投放（phone advertising）唯一标识

    手机标示,为了识别用户,方面advertising. 使用设备id,相当于暴露用户隐私.慢慢已不允许使用.. (长时间跟踪用户无异于暴露用户隐私,虽然大量数据适合兴趣建模,广告个性化推荐.但复杂多样会 ...

  5. matlab学习日志之并行运算

    原文地址:matlab并行计算,大家共同学习吧,涉及到大规模数据量处理的时候还是效果很好的 今天搞了一下matlab的并行计算,效果好的出乎我的意料. 本来CPU就是双核,不过以前一直注重算法,没注意 ...

  6. (NO.00002)iOS游戏精灵战争雏形(一)

    原本想做一个复杂点的平面动作游戏,可以觉得还是有点把握不了.还是先从简单的原型开始吧. 构思中的精灵战争(SpriteWar)是一个类似FC时代的小游戏,可以造兵,可以捕获敌兵.原本还想加上保卫老巢的 ...

  7. OS X 10.11 中的安全删除文件

    在 OS X 10.11 中安全倾倒垃圾桶这个功能已经被取消了.是因为 SSD 闪存硬盘的原因 . 安全删除操作并不能安全清除. 所以就直接取消了. 但是其实其实还是可以在系统内使用安全删除功能的. ...

  8. saiku运行时报错max_length_for_sort_data 需要set higher

     infiniDB或者mysql数据库,运行时,按某个字段排序会出错.报错:max_length_for_sort_data  ... set higher. saiku报错, 也是这样. 这是数 ...

  9. Oracle Applications DBA 基础（一）

    1.引子 2014年9月13日 20:33 <oracle Applications DBA 基础>介绍Oracle Applications R12的系统架构, 数据库后台及应用系统的基 ...

  10. UnityEditor下文件操作方法汇总（Unity3D开发之二十四）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/50595585 ...