React
[React] 간단하게 예제 코드로 구현해 보는 Drag and Drop (드래그앤드롭)
제이콥(JACOB)
2021. 1. 10. 17:41
atlassian에서 만든 react-beautiful-dnd를 이것저것 궁금해져, 내부 코드를 보기 전에 기본 구현 학습을 위해 먼저 만들어 봤다. 자연스러운 애니메이션이나 특별한 기능은 없지만, 기본 드래그 앤 드롭이 어떻게 동작하는지 학습하는 데에는 나쁘지 않은 경험이었다(쉽지 않아~~).
기본적인 이벤트에 대한 설명은 이미 정리해놓은 블로그가 많고 더 특이하거나 추가된 내용도 없기 때문에 생략한다.
HTML Drag and Drop API - Web APIs | MDN
HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. A translucent represe
developer.mozilla.org
실제 프로덕션 환경에서는 직접 구현보다는 react-beautiful-dnd 라이브러리를 사용하는게 더 좋다.
직접 해보니 최적화부터 인터렉션까지 생각보다 공수가 많이 든다...
참고) 실제 동작화면(Stroybook)
Storybook
css-collection.vercel.app
반응형