<!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. javascript 把时间戳转为时间　ajax　HTML拼装

    这个目的是记下来,好让我以后可以看一下,这个脚本可是反反复复写了我N天啊!! 全部写下,以备后用! Date.prototype.format = function(format) { var o = ...

  2. #include <iostream>与#include <iostream.h>的区别

    在新的C++标准中,生成新头文件的方法仅仅是将现有C++头文件名中的   .h   去掉.例如,<iostream.h> 变成了<iostream> ,<complex. ...

  3. tomcat集群机制剖析及其生产部署选型

    为什么要使用集群? 为什么要使用集群?主要有两方面原因:一是对于一些核心系统要求长期不能中断服务,为了提供高可用性我们需要由多台机器组成的集群:另外一方面,随着访问量越来越大且业务逻辑越来越复杂,单台 ...

  4. Emotiv脑电设备与RDS机器人仿真初步测试

    Emotiv脑电设备与RDS机器人仿真初步测试 在脑电设备相关算法进行真实机器人测试前,有必要进行大量仿真验证算法,节约开发时间. 这里给我启发的Emotiv使用所参考的一些网址. 官网:https: ...

  5. Gradle 1.12用户指南翻译——第二十四章. Groovy 插件

    其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://g ...

  6. AndFix使用感想

    AndFix已经使用了一段时间了,但是到AndFix上看了一下,最近2个月都没有更新代码了,有141个issues和3个pull request没人处理,其实AndFix的Contributors就俩 ...

  7. ITU-T Technical Paper： IP服务性能模型

    本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...

  8. 如何在Android上编写高效的Java代码

    转自:http://www.ituring.com.cn/article/177180 作者/ Erik Hellman Factor10咨询公司资深移动开发顾问,曾任索尼公司Android团队首席架 ...

  9. 如何配置android的adb环境变量

    如果打开DOS窗口,输入adb显示既不是内部命令也不是外部命令,则说明没有配置adb环境变量.方法如下: 第一步: 打开环境变量配置窗口.右击计算机,属性-高级系统设置-环境变量. 第二部: 添加an ...

  10. 脚本自动化 ant

    用ant,shell下也可以用make. 1,ant 是一个自动化编译工具,安装使用. 2,编写build.xml,核心,写明进行哪些操作,删,建,编译,javac,java等,从例子可以看出每个操作 ...