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

我正在尝试编写一个类，用于在我的网页中实现可视化拖放功能（是的，我知道有一些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>

因此，它仅水平移动组件

正如我所说，如果您尝试拖动组件两次或更多次，

div

将开始放置在随机位置

我错过了什么

还有一个if-it-help

在这里修复了它-

问题:

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

---

希望有帮助

你的X&Y是交叉的：

dnd.componentX = parseInt(dnd.obj.style.left);
dnd.componentY = parseInt(dnd.obj.style.top);

这里有一把新小提琴：

另外，由于我已经实现了多次拖放操作，您可能会发现将

mousemove

和

mouseup

附加到窗口会更干净一些。这将允许您移出div并仍将其拖动，以及在页面上的任何位置提起鼠标以停止拖动：

window.addEventListener('mouseup', function(e){ dnd.mouseUp(e); });
window.addEventListener('mousemove', function(e){ dnd.mouseMove(e); });

---

好吧，我的错，谢谢！我不能删除这个问题，所以我会接受你的回答，谢谢！这真是一个愚蠢的错误。感谢活动听众的建议，我不知道！

window.addEventListener('mouseup', function(e){ dnd.mouseUp(e); });
window.addEventListener('mousemove', function(e){ dnd.mouseMove(e); });