위치를 떨어 뜨립니다. 순수 자바 스크립트/HTML5

Question

현재 웹 개발이 필요한 최종 프로젝트를 진행하고 있습니다. 저는 현재 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); 

이미지의 왼쪽 상단 구석은 이미지를 떨어 뜨렸을 때의 마우스의 위치입니다.