HTML 5ドラッグ＆ドロップとJavaScriptを使用

Question

すべて、

私はHTML5ドラッグアンドドロップとJavaScriptを使用しようとしています。しかし、マウスを放す場所と同じ場所にアイテムをドロップすることはできません。 destinationContainerにアイテムをドロップするたびに、X座標とY座標がそれぞれ上部スタイルと左スタイルで機能しません。

私は参照のためにjsfiddleを含んでいます。また、私はドロップイベントを表すスニペットコードを含んでいます。

ありがとうございました！

https://jsfiddle.net/mdevera/94vzuo89/2/

function drop(event) { 

console.log("drop"); 

event.preventDefault(); 

var id = event.dataTransfer.getData("text/plain"); 

if ((id === "item1" || id === "item2") && event.target.className === "destinationContainer") { 

    var clone = document.getElementById(id).cloneNode(true); 

    clone.id = Math.floor((Math.random() * 100) + 1); 

    /// Style for making item drop in the same mouse location of drop. Does not work. 
    //clone.style.top = event.clientY + "px"; 
    //clone.style.left = event.clientX + "px"; 


    clone.style.position = "relative"; 
    event.target.appendChild(clone); 

} 

}

Answer 1

あなたはjQueryのを使用してelement.offset().topとelement.offset().leftを使用してXかY位置を取得しようとすることができます。