See the Pen Untitled by seon.o.min (@seon-o) on CodePen.
사용자가 이미지를 드래그하여 다른 요소에 드롭할 수 있게 아래와 같이 작업을 수행해야합니다.
1. 드래그 대상 설정: 먼저 사용자가 드래그 할 수 있는 요소를 설정해야 합니다. 이는 HTML의 draggable 속성을 사용하여 설정할 수 있습니다. 예를 들어, <div draggable="true">Drag me!</div>는 사용자가 드래그할 수 있는 div 요소를 만듭니다.
2. 드래그 이벤트 처리: 사용자가 드래그 대상을 드래그하기 시작하면 dragstart 이벤트가 발생합니다. 이 이벤트 핸들러에서는 드래그하는 데이터를 설정하고, 어떤 드래그 앤 드롭 작업을 수행할지 결정해야 합니다. 이는 DataTransfer.setData() 메서드를 사용하여 수행할 수 있습니다.
3. 드롭 대상 설정: 사용자가 요소를 드롭할 수 있는 대상을 설정해야 합니다. 이는 dragover 이벤트 핸들러에서 event.preventDefault()를 호출하여 수행할 수 있습니다. 이렇게 하면 브라우저의 기본 동작을 막고, 해당 요소에서 드롭 이벤트를 허용하게 됩니다.
4. 드롭 이벤트 처리: 사용자가 드래그한 요소를 드롭 대상에 드롭하면 drop 이벤트가 발생합니다. 이 이벤트 핸들러에서는 브라우저의 기본 동작을 막고(event.preventDefault()), 드래그한 데이터를 가져와서(DataTransfer.getData()), 드롭 대상에 추가하거나 다른 작업을 수행합니다.
5. 드래그 종료 처리: 사용자가 드래그를 끝내면(드롭하거나 취소하면) dragend 이벤트가 발생합니다. 필요에 따라 이 이벤트를 사용하여 드래그가 끝났을 때의 추가 작업을 수행할 수 있습니다.
