位置を落とします。純粋なJavascript/HTML5

Question

私は現在、Webを開発する必要がある最終年度のプロジェクトをやっています。 私は現在、divに画像をドラッグして、ドロップした位置に画像をコピーしています。私はclientXとclientYの座標を取得することに成功しましたが、その座標に落とすことはできません。 JavascriptとHTML5を使用してそれをドロップする方法に関するアイデアはありますか？

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

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

 
function drop(ev) { 
 

 
    ev.preventDefault(); 
 
    window.alert(ev.clientX + ',' + ev.clientY); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    var nodeCopy = document.getElementById(data).cloneNode(true); 
 
    ev.target.appendChild(nodeCopy); 
 
    ev.stopPropagation(); 
 
    return false; 
 
    
 
    
 
}

#div1 { 
 
    
 
    width:500px;height:500px;padding:10px;border:5px solid #aaaaaa;float:left; 
 

 
}

\t <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event) " > Drop here </div> 
 

 
\t \t \t \t \t \t \t <img id="drag1" src="images/shoe.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100"> 
 
\t \t \t \t \t \t \t <img id="drag2" src="images/LZK-Logo.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100">

DIV1

は私が上で私のdrag1とdrag2を落としたい場所です。ちょうどポジションの問題を解決できませんでした。何か案が ？。

Answer 1

nodeCopyの位置を設定するだけで済みます。

var nodeCopy = document.getElementById(data).cloneNode(true); 
nodeCopy.setAttribute("style","position:absolute; top:" + ev.clientY + "px; left:" + ev.clientX + "px;"); 
ev.target.appendChild(nodeCopy); 

画像の左上隅は、画像をドロップしたときのマウスの位置になります。