ドロップされた要素の位置をトレースし、それに応じて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); 

}