如何跟蹤放置元素的位置，並相應地將其放在div javascript？

Question

當我可以放棄我的元素時，我有一個很大的div元素。現在每當我將一些元素放入目標div時，它就會自動定位。但是我希望我的掉落元素保留在我將其放入div的位置。我怎樣才能做到這一點。

我有正常的功能實現爲：

function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 
} 

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("text"); 
    ev.target.appendChild(document.getElementById(data)); 
} 

如何跟蹤在那裏我放棄了元素，這樣我可以將它放在裏面的div同一位置的位置？

Answer 1

你可以得到下降元素的位置：

var x = event.clientX; 
var y = event.clientY; 
var coords = "X coords: " + x + ", Y coords: " + y; 

所以你的最終代碼將是：

function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 
} 

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("text"); 
    ev.target.appendChild(document.getElementById(data)); 
    console.log(event.clientX); 
    console.log(event.clientY); 

}