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
반응형
'React' 카테고리의 다른 글
| React로 줄바꿈에 따라 늘어나는 textarea 구현하기(+ caret 색상 변경) (0) | 2021.01.29 |
|---|---|
| React로 Threejs 예제 따라 구현하기 (0) | 2021.01.23 |
| [React Dot Notation] 리액트 컴포넌트 점 표기법 (0) | 2020.12.25 |
| [React Dynamic Component] 동적으로 컴포넌트를 보여주는 방법 (0) | 2020.12.22 |
| React + Styled-components로 항상 보이는 스크롤 구현하기 (0) | 2020.07.26 |