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拖放到目標而不知道其位置

回答

相關問題