0

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

4

2 回答 2

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

希望能帮助到你！

于 2014-05-02T22:59:07.557 回答
1

你是 X 和 Y 的交叉：

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

这是一个新的小提琴：http: //jsfiddle.net/yUQTf/2/

另外，只是一些建议，因为我已经多次实现拖放，您可能会发现将您的mousemove和附加mouseup到窗口上更简洁一些。这将允许您离开 div 并仍然拖动它，以及在页面上的任意位置抬起鼠标以停止拖动：

window.addEventListener('mouseup', function(e){ dnd.mouseUp(e); });
window.addEventListener('mousemove', function(e){ dnd.mouseMove(e); });
于 2014-05-02T22:59:16.117 回答