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

时间:2011-04-21 23:37:16

标签: javascript javascript-events drag-and-drop

我正在创建一个简单的应用程序,允许将多个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库来帮助我。)

1 个答案:

答案 0 :(得分:1)

您应该使用jQuery UI's Droppable。事情会简单得多,你不需要解决这样的问题 人们花了很多时间才使这项工作正常进行。你不应该再浪费时间再解决所有这些错误 最重要的是,您可以按ID标记放置目标,而不需要处理坐标