Javascript JS在不知道目标位置的情况下拖放到目标
我正在创建一个简单的应用程序,允许将多个img拖动到页面上的目标div。在目标div上拖动并释放img时,会记录img的属性Javascript JS在不知道目标位置的情况下拖放到目标,javascript,drag-and-drop,dom-events,Javascript,Drag And Drop,Dom Events,我正在创建一个简单的应用程序,允许将多个img拖动到页面上的目标div。在目标div上拖动并释放img时,会记录img的属性 不幸的是,我的网页是建立在百分比的基础上的,我想知道是否有任何方法可以在不知道目标区域的顶部、左侧等位置的情况下实现这一点。换言之,不使用绝对值 我已经让拖拽部分正常工作了,它只是在模拟检测,我发现这很棘手 我想我在目标div上使用mouseover事件已经非常接近了,但是拖动img当然会阻止事件的触发。当我释放我的图像时,它会重置到正常位置,并给鼠标盖一个看起来合适的
不幸的是,我的网页是建立在百分比的基础上的,我想知道是否有任何方法可以在不知道目标区域的顶部、左侧等位置的情况下实现这一点。换言之,不使用绝对值 我已经让拖拽部分正常工作了,它只是在模拟检测,我发现这很棘手 我想我在目标div上使用mouseover事件已经非常接近了,但是拖动img当然会阻止事件的触发。当我释放我的图像时,它会重置到正常位置,并给鼠标盖一个看起来合适的短暂时间 然而,在测试中,这个时间间隔似乎没有给鼠标足够的时间开火(如果可能的话)。我相信是这样的,因为我在拖动的图像停止阻止目标div并且img的属性成功打印到我的控制台日志之后立即发出了警报
总之,我试图模拟掉在目标上的图像,因为不可能通过其在屏幕上的位置推断出目标div。
(不幸的是,在这种情况下,我无法使用js库来帮助我。)您可能应该使用。事情会简单得多,你不需要解决这样的问题。
人们花了很多时间使这项工作正常进行。你不应该再浪费时间解决所有这些错误。
除此之外,您还可以通过ID标记放置目标,而不需要处理坐标
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);