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

希望，这有帮助！

Answer 2

你是X＆amp; Y's交叉：

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

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

2 个答案: