使用 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 代码：
<style>
#Drag {
/*border: 5px solid #C4E3FD;*/
background: #C4E3FD;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
z-index: 2;
}
</style> <div id="Drag" onmousedown="moveBind(this, event)">1</div>
</div>
<br />拖放状态：<span id="idShow">未开始</span>
onmousedown="moveBind(this, event)" 这里是绑定鼠标按下事件，并将当前元素对象与事件信息传入 moveBind 方法里。
2.JS代码
<script>
function moveBind(obj, evnt) {
//获得元素坐标。
var left = obj.offsetLeft;
var top = obj.offsetTop;
var width = obj.offsetWidth;
var height = obj.offsetHeight;
//计算出鼠标的位置与元素位置的差值。
var cleft = evnt.clientX - left;
var ctop = evnt.clientY - top;
document.onmousemove = function (doc) {
//计算出移动后的坐标。
var moveLeft = doc.clientX - cleft;
var moveTop = doc.clientY - ctop;
//设置成绝对定位，让元素可以移动。
obj.style.position = "absolute";
//当移动位置在范围内时，元素跟随鼠标移动。
obj.style.left = moveLeft + "px";
obj.style.top = moveTop + "px";
show("idShow", moveLeft, moveTop);
}
document.onmouseup = function () {
document.onmousemove = function () { }
};
}
</script>
其中：
//获得元素坐标。
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 坐标。
其它的代码都如同上面思路所写的这里就不一一说明了。