使用 JS 来实现一个可拖动的DIV，主要是使用到以下几个事件：

1.鼠标按下：DIV元素的onmousedown。

2.鼠标按住拖动：document 的 onmousemove 元素。

3.鼠标放开：document 的 onmouseup 元素。

 

一、思路

1.当使用点击要拖动的 DIV 时，要首先计算出鼠标的位置与元素位置的差值：

1.1.X坐标的差值 = 鼠标当前位置的X坐标 - DIV元素的X坐标（即：左偏移量）

1.2.Y坐标的差值 = 鼠标当前位置的Y坐标 - DIV元素的Y坐标（即：上偏移量）

2.绑定 document.onmousemove 事件并改变 DIV 元素的位置。

将 DIV 元素的 position 设置成：absolute。让元素可以改变位置。

DIV 元素的X坐标 = 鼠标当前位置的X坐标 - X坐标的差值

DIV 元素的Y坐标 = 鼠标当前位置的Y坐标 - Y坐标的差值

3.绑定 document.onmouseup 事件。

当鼠标放开的时候，清除绑定 document.onmousemove 事件

 

二、代码实现

 

1.Html 代码：

     
      1
     
拖放状态：未开始

οnmοusedοwn="moveBind(this, event)" 这里是绑定鼠标按下事件，并将当前元素对象与事件信息传入 moveBind 方法里。

2.JS代码

其中：

//获得元素坐标。var left = obj.offsetLeft;var top = obj.offsetTop;var width = obj.offsetWidth;var height = obj.offsetHeight;

这里分别获得元素的 X 坐标， Y 坐标，宽度，高度。

//计算出鼠标的位置与元素位置的差值。        var cleft = evnt.clientX - left;        var ctop = evnt.clientY - top;

evnt.clientX 和 evnt.clientY 获取到的是鼠标的位置。

然后通过上面的公式计算出差值。

obj.style.left = moveLeft + "px";

这里就是直接修改元素的 X 坐标。

其它的代码都如同上面思路所写的这里就不一一说明了。