JS拖放到目标而不知道它的位置答案

【问题标题】：JS Drag and Drop to target without knowing its positionJS拖放到目标而不知道它的位置
【发布时间】：2011-04-21 23:37:15
【问题描述】：

我正在创建一个简单的应用程序，它允许将多个 img 拖动到页面上的目标 div。当 img 在目标 div 上被拖动和释放时，img 的属性会被记录下来。

不幸的是，我的网页是基于百分比构建的，我想知道是否有任何方法可以在不知道目标区域的顶部、左侧等位置的情况下完成此操作。换句话说，不使用绝对值。

我已经让拖动部分工作正常，它只是模拟我觉得很棘手的检测。

我认为我已经非常接近使用目标 div 上的 mouseover 事件，但是拖动 img 会阻止事件触发。当我释放我的图像时，它会重置为正常位置，并给鼠标悬停一段时间以使其看起来合适。

但是在测试中，这个时间间隔似乎没有给鼠标悬停足够的时间来触发（如果可能的话）。我相信是这种情况，因为我在拖动的图像停止阻塞目标 div 并且 img 的属性成功打印到我的控制台日志后立即发出警报。

img.style.position = "relative";
img.style.left = "0px";
img.style.top = "0px";

var startDrag = function(e){
    initialMouseX = e.clientX;
    initialMouseY = e.clientY;
    initialElementX = initialElementY = "0px";
    img.style.zIndex = 1000;
    document.addEventListener("mouseup", removeDrag, true);
    document.addEventListener("mousemove",movement,true);
    document.getElementById("drag-area").addEventListener("mouseover",
    readPeriod,true); //mouseover event starts when the user presses the img
};

var removeDrag = function(e){
    document.removeEventListener("mousemove",movement,true);
    img.style.left="0px";
    img.style.top="0px";
    img.style.zIndex = 0;
    //an alert at this point gives the mouseup time to fire
    img.removeEventListener("mouseup", removeDrag, true);
        //mouseover ends after the img has stopped blocking the mouse
    };

var movement = function(e){
    /*Code which moves the dragging img by style.left/top*/
};

var readPeriod = function(e){
    console.log(img.name); //Point of simulated on target div
};

img.addEventListener("mousedown",startDrag,true);

所以总而言之，我试图模拟图像落在目标上，因为它不可能通过屏幕上的位置推断出目标 div。
（不幸的是，在这种情况下，我无法使用 js 库来帮助我。）

【问题讨论】：

标签： javascript drag-and-drop dom-events

【解决方案1】：

您可能应该使用jQuery UI's Droppable。事情会简单得多，您不需要解决这样的问题。
人们投入了很多时间来使这项工作正常进行。您不应该再次浪费时间并再次解决所有这些错误。
最重要的是，您可以通过 ID 标记放置目标，无需处理坐标

【讨论】：