假設我們把物體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);