JS拖放到目标而不知道其位置

我正在创建一个简单的应用程序，它允许将多个img拖到页面上的目标div上。当img被拖动并释放目标div时，img的属性被记录下来。JS拖放到目标而不知道其位置

不幸的是我的网页是建立在百分比和我想知道是否有无论如何这种方式可以在不知道上面进行，离开了目标区域的位置等。换句话说，没有绝对的工作。

我已经得到了拖动部分工作正常，它只是模拟我发现棘手的检测。

我想我已经非常接近在目标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);

因此，在总结我试图模拟图像拖放到目标自不可能通过其在屏幕上的位置推断出目标股利。
（不幸的是，我无法在这种情况下使用js库来帮助我。）

来源

2011-04-21 Aaron

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

来源

2011-04-21 23:45:22

JS拖放到目标而不知道其位置

回答

相关问题