假设我们把物体1 拖拽到物体2 的地方，此刻可以知道拖拽的步骤是：先鼠标左键点到物体1 然后移动到物体2的地方，松开左键，完成拖拽
当点击的时候，可以通过事件源e.pagaX或者e.pageY获取到鼠标点击的位置，然后通过脚本化css可以获取到物体距离边界的top值和left值。假设物体1的深蓝线条点击处距离物体上边界disY，距离物体左边界为disX，即：disX = e.pageX - box.offsetLeft、disY = e.pageY - box.offsetTop。
上面知道了鼠标点击位置距离物体上\左边界的距离大小，当移动的时候就必须要重新计算物体的top值和left值。即：box.style.left = e.pageX - disX + 'px'; box.style.top = e.pageY - disY + 'px';。这样物体就跟着你的鼠标移动了。
代码入下：
var box = document.getElementById("box"),
wrapper = document.getElementById('wrapper');
function bindEvent(box, wrapper) {
var X,
Y,
boxL,
boxT,
disL,
disT,
drag = false;
box.onmousedown = function (e) {
drag = true;
var e = e || window.event;
X = e.pageX;
Y = e.pageY;
boxT = box.offsetTop;
boxL = box.offsetLeft;
disT = Y - boxT;
disL = X - boxL;
}
wrapper.onmousemove = function (e) {
var e = e || window.event;
if (drag) {
box.style.left = e.pageX - disL + 'px';
box.style.top = e.pageY - disT + 'px';
}
}
box.onmouseup = function () {
drag = false;
}
}
bindEvent(box, wrapper);