HTML5 끌어서 놓기를 사용하면 이미지가 놓기 영역 위에있을 때 이미지를 어떻게 변경할 수 있습니까?

Question

그래서 여기에 내가하고 싶은 것이있다. 요소를 드래그 할 수 있고 드롭 영역 위에있을 때 기본 드래그 이미지를 다른 이미지로 동적으로 변경해야합니다.

Answer 1

dataTransfer.setDragImage 방법을 사용하여 드래그 이미지를 설정할 수 있습니다. dragover 이벤트를 포함하여 모든 끌기 이벤트의 이벤트 객체에 있습니다.

몇 가지 기본 코드는 다음과 같습니다

dropElem.ondragover = function(e) { 
    if (e.stopPropagation) { 
     e.stopPropagation(); //Stops some browsers from redirecting. 
    } 
    var dragIcon = document.createElement('img'); 
    dragIcon.src = 'image.png'; 
    dragIcon.width = 100; 
    e.dataTransfer.setDragImage(dragIcon, 0, 0); 
};