MDN web docs - dragover에 등장하는 예제를 그대로 가져왔다.
JavaScript, React 등으로 웹 앱을 만들다보면 가끔 마우스로 특정 요소(domElement)를 드래그해서 위치를 옮겨주고 싶을 때가 있다.
복잡한 로직이라면 여러가지 브라우저 Event를 조합하여 사용해야겠지만, draggable한 요소를 drop 가능한 영역으로 이동하여 HTML을 조작하는 동작은 본 예제로 쉽게 구현할 수 있다.
응용 가능성?
위 MDN 예제를 보다가 몇 가지 의문 내지는 응용 가능성을 생각해보았다.
첫째, 여러 draggable 요소를 Ctrl+Click 으로 복수 선택한 후에 동시에 드래그할 수 있을까?
둘째, div 내부에 있는 텍스트도 수정할 수 있도록 하면서 div 박스는 드래그&드롭으로 움직이도록 할 수 있을까?
셋째, 위 예제에서는 드래그를 하는 동안 div 박스에 투명도가 적용된다. 투명도가 적용되지 않도록 바꿀 수 있을까?
추후 여유가 있을 때 위 세 가지에 대해 탐구해 볼 예정이다.
