<!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. 欢迎进入我的个人博客 anzhan.me

    CSDN的博客依旧会更新,但是还是专注于技术. 个人的博客 http://anzhan.me 不单单会同步csdn的技术文章,还会有个人的更多私人的分享,包括旅行日记.欢迎各位朋友经常去看看,大家有私 ...

  2. javascript之DOM编程设置节点插入节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. “基于数据仓库的广东省高速公路一张网过渡期通行数据及异常分析系统"已被《计算机时代》录用

       今天收到<计算机时代>编辑部寄来的稿件录用通知,本人撰写的论文"基于数据仓库的广东省高速公路一张网过渡期通行数据及异常分析系统",已被<计算机时代>录 ...

  4. 2013 HTML5中国峰会演讲：Android上的HTML5:过去,现在和将来

    转载请注明原文地址:http://blog.csdn.net/milado_nju ## 会议链接(应用和工具专场) http://2013.html5dw.com/main, 2013年8月10日 ...

  5. 深入认识AsyncTask

    1.概述 在android开发中是采用单线程模型,主线程通常称为UI线程,由于UI线程的操作不是线程安全的,因此android规定有关更新界面的操作必须在主线程中进行,其他线程直接报错. 如果我们把所 ...

  6. Leetcode_24_Swap Nodes in Pairs

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/43302355 Given a linked list, s ...

  7. 为神马精确Sprite的碰撞形状不通过简单的放大Sprite的尺寸来解决?

    原因是SoftBodyDrawNode的绘制代码中已经没有完整的,一体化的(incorporate)缩放,旋转或者甚至是精灵的位置(scale,rotation,or even the sprite' ...

  8. unity 球体表面平均分割点

    之前看了别人的一份源码,讲到了球体表面平均分割点,于是也好奇去查了一下算法,自己写不出来,借用算法在unity写了一个小demo using UnityEngine; using System.Col ...

  9. 数据挖掘进阶之序列模式挖掘GSP算法

    数据挖掘进阶之序列模式挖掘GSP算法 绪 继续数据挖掘方面算法的讲解,前面讲解了数据挖掘中关联规则算法FP-Growth的实现.此篇博文主要讲解基于有趣性度量标准的GSP序列模式挖掘算法.有关论文后期 ...

  10. Objective-C的面向对象特性（二）

    在Objective-C语言中, 类别.类扩展(也称为匿名类别)以及协议是Objective-C 语言级别支持的模式,用来实现对类进行功能扩展. 一.类别--用来增加方法到已存在类 声明一个类别的语法 ...