drag and drop(feat. react)

드래그를 끝내고 드랍하는 순간 드랍 위치에 따라서 고스트 이미지가 원 위치로 돌아가는 현상이 나타난다.
이는 드랍 위치가 드랍 가능한 위치인지 아닌지를 사용자에게 시각적으로 제공하기 위한 브라우저의 기본 처리 방식이다.
드랍 가능한 위치라는 것을 나타내기 위해서는 ondragover 리스너에서 retrun false 혹은 event.preventDefault() 해줘야 한다.

또한 엘리먼트의 드래그를 통한 위치 수정을 하기 위해서는 top, left, right, bottom 속성을 사용해야 drop 위치를 인식하게 할 수 있다.
transform 속성의 translate 값을 수정하여 위치를 변경하면 ondragover 이벤트 리스너가 실행되지 않는다.

 

MDN

데모