javascript - 自定义拖放脚本上的奇怪 js 行为

Question

我正在尝试编写一个类来在我的网页中实现可视化拖放功能(是的，我知道有一些 jquery 插件，我这样做是为了“有趣”)。

它所要做的就是将鼠标监听器附加到 div 元素，并在触发 mousedown 和 mousemove 事件时移动它.

一切似乎都很好，但是当我多次拖动 div 时，脚本就会变得疯狂。

这是我写的js:

var dnd;

function DragDrop (obj, horizontal, vertical) {
    dnd = this;
    this.obj = obj;
    this.horizontal = horizontal;
    this.vertical = vertical;
    obj.onmousedown = this.mouseDown;
    obj.onmouseup = this.mouseUp;
    obj.onmousemove = this.mouseMove;
}

DragDrop.prototype.mouseUp = function(e) {
    dnd.mousePressed = false;
};

DragDrop.prototype.mouseDown = function(e) {
    dnd.screenX = e.screenX;
    dnd.screenY = e.screenY;
    dnd.componentX = parseInt(dnd.obj.style.top);
    dnd.componentY = parseInt(dnd.obj.style.left);
    dnd.mousePressed = true;
};

DragDrop.prototype.mouseMove = function(e) {
    if(!dnd.mousePressed) return;

    if(dnd.horizontal) {
        var x = e.screenX;
        var deltaX = x - dnd.screenX;
        dnd.obj.style.left = dnd.componentX + deltaX + "px";
    }
    if(dnd.vertical) {
        var y = e.screenY;
        var deltaY = y - dnd.screenY;
        dnd.obj.style.top = dnd.componentY + deltaY + "px";
    }
}

和 HTML:

<div id="asd" style="position:absolute; top:50px; left:50px; background-color:black; color:white; padding: 10px; width:100px; height: 100px">
    DRAG ME
</div>

我将 DragDrop 类初始化为:

window.onload = function() {
    new DragDrop(document.getElementById("asd"), false, true);
}

因此它仅水平移动组件。

正如我所说，如果您尝试拖动组件两次或更多次，div 就会开始放置在随机位置。

我错过了什么？

还有一个JSFiddle here如果有帮助的话

Answer 1

在这里修复它 - http://jsfiddle.net/yUQTf/1/

问题:

DragDrop.prototype.mouseDown = function(e) {
    dnd.screenX = e.screenX;
    dnd.screenY = e.screenY;
    dnd.componentX = parseInt(dnd.obj.style.top); // This should be dnd.componentY
    dnd.componentY = parseInt(dnd.obj.style.left); // This should be dnd.componentX
    dnd.mousePressed = true;
};

希望有帮助!