<!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. Guava 教程2-深入探索 Google Guava 库

    原文出处: oschina 在这个系列的第一部分里,我简单的介绍了非常优秀的Google collections和Guava类库,并简要的解释了作为Java程序员,如果使用Guava库来减少项目中大量 ...

  2. 生成1~n的排列，以及生成可重集的排列

    #include <iostream> using namespace std; void printPermutation(int n, int* A, int cur) { if (c ...

  3. (NO.00003)iOS游戏简单的机器人投射游戏成形记(三)

    接下来我们建立机器人对象. 在Sprites文件夹中新建Robot.ccb文件,类型为Node. 打开SpriteBuilder的Tileless View将机器人身体和手臂拖入根节点,调整好相对的位 ...

  4. Java Map 及相应的一些操作总结

    Map是我们在开发的时候经常会用到的,大致有以下几个操作,其中putAll方法是针对集合而言的操作,故不再进行说明,下面请看一下常用的知识点吧,尤其是keySet和Values两个方法及相应值的获取方 ...

  5. ibatis 数据库时间 插入数据

    <insert id="insert" parameterClass="ToDoBar" >     <selectKey resultCla ...

  6. 学习pthreads，使用属性对象创建结合线程和分离线程

    当我们创建了子线程,是让它犹如脱缰之马,信步驰骋,还是如乖巧听话的孩子,时不时教导一下呢?针对这个问题,本文介绍线程的结合和分离,结构分为三个部分,第一部分给出代码示例,第二部分对代码进行讲解,第三部 ...

  7. Dynamics CRM 2011/2013 DeveloperToolkit的使用

    Dynamic CRM 2011的SDK中提供了一个叫DeveloperToolkit的工具,他的用途官方说明说的很明确,能方便开发者在VS中直接部署webresource.plugin.workfl ...

  8. 用boost::bind构造boost::coroutine

    class TestCoro { ... typedef boost::coroutines::coroutione<void ()> Coro; void CoroFun(Coro::c ...

  9. ffdshow 源代码分析 6： 对解码器的dll的封装（libavcodec）

    ===================================================== ffdshow源代码分析系列文章列表: ffdshow 源代码分析 1: 整体结构 ffds ...

  10. 供应商信息全SQL

    SELECT hou.name, pv.vendor_name 供应商, pv.party_id, pvs.vendor_site_id, pvs.terms_id, pv.vendor_name_a ...