假設(shè)我們把物體1 拖拽到物體2 的地方，此刻可以知道拖拽的步驟是：先鼠標(biāo)左鍵點(diǎn)到物體1 然后移動(dòng)到物體2的地方，松開(kāi)左鍵，完成拖拽
當(dāng)點(diǎn)擊的時(shí)候，可以通過(guò)事件源e.pagaX或者e.pageY獲取到鼠標(biāo)點(diǎn)擊的位置，然后通過(guò)腳本化css可以獲取到物體距離邊界的top值和left值。假設(shè)物體1的深藍(lán)線條點(diǎn)擊處距離物體上邊界disY，距離物體左邊界為disX，即：disX = e.pageX - box.offsetLeft、disY = e.pageY - box.offsetTop。
上面知道了鼠標(biāo)點(diǎn)擊位置距離物體上\左邊界的距離大小，當(dāng)移動(dòng)的時(shí)候就必須要重新計(jì)算物體的top值和left值。即：box.style.left = e.pageX - disX + 'px'; box.style.top = e.pageY - disY + 'px';。這樣物體就跟著你的鼠標(biāo)移動(dòng)了。
代碼入下：

        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);