<!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. iOS中 数据持久化 UI高级_17

    数据持久化的本质就是把数据由内写到本地(硬盘中),在iOS指将数据写到沙盒文件夹下: 沙盒机制:指的就是采用沙盒文件夹的形式管理应用程序的本地文件,而且沙盒文件夹的名字是随机分配的,采用十六进制方法命 ...

  2. 12.2、Libgdx的图像之清屏

    (官网:www.libgdx.cn) 在Libgdx中的清屏操作不同于普通的OpenGL应用.唯一的不同是访问OpenGL context. 代码如下: @Override public void r ...

  3. ACM算法竞赛:抄课文

    题目如下: 比如现在要写一句话 Hello world 输入: n (n > 0) 比如输入的n为10,就将Hello world打印十 #include <stdio.h> #in ...

  4. iOS&nbsp;动画总结—UIView动画

    1.概述 UIKit直接将动画集成到UIView类中,实现简单动画的创建过程.UIView类定义了几个内在支持动画的属性声明,当这些属性发生改变时,视图为其变化过程提供内建的动画支持. 执行动画所需要 ...

  5. 发布Ext JS 5.1 beta版本

    原文:Announcing Ext JS 5.1 Beta 概述 我们很高兴的宣布,Ext JS 5.1 beta发布了.自从Ext JS 5.0.1,我们一直在努力添加一些令人兴奋的和一些在Senc ...

  6. 完美滑动顶部固定ScrollView,合并可以上拉,下拉加载更多

    先看效果: 主要处理: 使用PullToRefreshScrollView修改内部的scrollView源码,更换成可以固定顶部的自定义scrollView @Override protected S ...

  7. Cocos2d中update与fixedUpdate的区别(四)

    关于fixedUpdate:方法的目的 现在,想象一下在小球飞行的位置1到8之间有一个移动的平台: 该平台不停地上升和下降.有些时候小球可以不碰到而飘过平台,有些时候小球会和平台发生碰撞: 这表示小球 ...

  8. Android开发你不知道的TIPS

    1.Space space是Android 4.0中新增的一个控件,它实际上可以用来分隔不同的控件,其中形成一个空白的区域.这是一个轻量级的视图组件,它可以跳过Draw,对于需要占位符的任何场景来说都 ...

  9. Java深拷贝浅拷贝

    首先,Java中常用的拷贝操作有三个,operator = .拷贝构造函数 和 clone()方法.由于Java不支持运算符重载,我们无法在自己的自定义类型中定义operator=.拷贝构造函数大家应 ...

  10. Cocos2D的OALSimpleAudio预加载音频

    在OALSimpleAudio接口中,没有委托机制和通知机制告诉你什么时候预加载完成.也不需要这样的机制. 如下代码: //Listing 11-1. Preloading a background ...