react와 연결된 예쁜 드래그 인터랙티브

본고에서 @dnd kit과react table를 사용하여 드래그 앤 드롭 정렬 테이블을 구축하는 방법을 연구할 것입니다.

React에서 드래그 앤 드롭 라이브러리를 찾을 때 다음과 같은 여러 옵션이 있습니다.

react-sortable-hoc - dnd 세트는 추천하지 않습니다.

react-beautiful-dnd

react-dnd

dnd-kit 우리는 오늘 탐색할 것이다.

많은 도서관들이 훌륭하지만, 어떤 도서관들도 큰 단점이 있다. 즉,

특정 용례나 제한성이 너무 강하다.

큰 의존 트리가 있는데 예를 들면 레드ux의 일부 버블!

일관성이 없는 브라우저 지원.

이러한 라이브러리를 볼 때 흔히 볼 수 있는 문제도 있다. 즉, HTML 드래그 API를 사용하여 플랫폼을 더 많이 사용하는 라이브러리를 선택하고, 브라우저의 불일치성을 극복하고, 터치, 마우스 커서, 키보드 등 다양한 입력에 대한 지원을 개선하는 데 도움을 주는 라이브러리를 일부러 사용하지 않는 것이다.
이번 조사의 일부로서 나는 진지하게 고려했다. react-beautiful-dnd 비록 그것은 매우 큰 지지와 시범을 보였지만, 나는 약간의 걸림돌에 부딪혔다.그것의 footprint 도 단일 용례의 프로그램에 추가하기 어렵다.또 다른 용례를 조사할 때 나는 this issue를 만났다. 나는 격자에서 수평과 수직으로 다시 정렬하고 싶다.
다른 라이브러리를 시도한 후에 @dnd kit을 선택했습니다. 이것은 아주 좋은 것이라고 말할 수 밖에 없습니다.그것은 기술적으로 여전히 테스트 단계에 있지만, 그럼에도 불구하고 문서는 상당히 성숙하다.docs 웹 사이트에서 다음과 같이 말합니다.

dnd kit is currently in beta. Issues and bugs should be expected for early releases. The core concepts are stable, but some of the APIs may change in the future.

그럼 왜 이 도서관이 좋아요?

이것은 가벼운 갈고리 기반의 실용 프로그램 구동 라이브러리입니다. 이것은 당신에게 유용한 원어를 제공하고 다른 기능을 선택할 수 있도록 합니다. 따라서 필요에 따라 라이브러리를 용례에 필요한 크기만 같게 합니다.
나는 가장 간단한 입문 방법은 그들의 일부 코드sandbox demos에서 일부 코드를 완성하는 것이라고 생각한다.저는 개인적으로 sortable image grid example의 충실한 팬입니다. 코드를 분해해서 어떻게 작동하는지 봅시다.dnd-kit를 사용하는 첫 번째 단계는 필요한 패키지를 설치하는 것입니다.이 라이브러리는 몇 개의 작은 마이크로 라이브러리로 나뉘어져 있으며, 라이브러리마다 추가 실용 프로그램을 제공한다.
하나 이상의 패키지@dnd-kit/core가 필요합니다(약 11KB gzip).
기타 유용한 패키지dnd-kit는 다음과 같은 기능과 이점을 제공합니다.

@dnd-kit/sortable - 정렬 가능한 인터페이스를 구축하는 데 사용되는 구축 블록입니다.(~3KB gzipped)

@dnd-kit/utilities - 통합된 dnd 패키지 실용 프로그램을 돕습니다.(~1.3KB gzipped)

@dnd-kit/modifiers - 드래그 앤 드롭 동작을 수직 또는 수평으로 제한하는 등의 수정자를 변경할 수 있습니다.(~3.4KB gzipped)

@dnd-kit/accessibility - 연결 고리는 화면 판독기 알림과 같은 접근성을 돕는다.(약 499B gzipped)

질문

주의, 내가 사용하는 과정에서 웹 패키지가 @dnd-kit/core 내부에서 사용하는 중복 데이터 제거@dnd-kit/sortable에 문제가 존재하는 것을 발견했다.bloat에 추가된 것 외에 이 의존항이 제거되지 않으면 DndContext 제공된 dnd-kit 은 작용하지 않습니다.만약 당신이 이런 상황을 만났다면, 같은 핵심 라이브러리 복사본을 사용하도록 강요할 수 있고, 웹 페이지에서 별명을 사용할 수 있다.배치하다.js.

  resolve: {
    alias: {
      // without this webpack dupes the dependencies when other dnd-kit libs use it which breaks context
      "@dnd-kit/core": path.resolve(__dirname, "node_modules/@dnd-kit/core"),
    }
  }

dnd 키트 배우기

우리가react table를 사용하여 이 예시를 시작하기 전에 이 라이브러리를 이해하는 가장 좋은 방법은 내가 앞에서 언급한 예시를 보는 것이다(sortable image grid example.
강조할 점은 라이브러리 DragOverlay 구성 요소가 매우 중요하고 멋있다는 것입니다. 드래그된 항목을 드래그할 때 다른 방식으로 표시할 수 있도록 사용자 정의react 구성 요소를 렌더링할 수 있습니다. 예를 들어 그림자를 추가하면 나중에 정렬 가능한 예시에서 알 수 있습니다.isDragging(또는 useSortable)에서 useDraggable 속성을 사용하여 불투명도나 색상 변경과 같은 원래 렌더링 항목의 렌더링 방식을 변경하여 배치 영역을 사용자에게 지시하는 데 도움을 줄 수 있습니다. 이것은 다음 예에서도 볼 수 있습니다.
만약 당신이 동영상을 통해 공부하는 것을 좋아한다면, API를 배우는 동시에, 나는 몇 가지 동영상을 보고 나서야 코드를 작성하기 시작할 것이다.

뭐가 더 좋아요?

이 라이브러리는 itstorybook에서 이를 어떻게 사용하는지에 대한 아주 좋은 예시를 제공했지만 이야기책에서 자주 등장하는 고전적인 문제에 부딪혔다. 그들은 전시하기에 매우 적합하지만 예시를 어떻게 조정하여 코드를 사용하는지 보여주는 데 그다지 뛰어나지 않다.내 말은 작성된 코드를 찾거나 이해하기 어려울 뿐만 아니라'시연할 때 너무 많은 코드를 반복해서 사용한다'는 문제에 자주 부딪히게 된다는 것이다. 솔직히 말해서 이것은 이야기책의 문제이지 라이브러리 자체의 문제가 아니라고 생각한다.
예를 들어 예시된 코드가 무엇을 하는지 선택하기 어려우므로 최종적으로github를 통해 검색하고 복잡한 예시와 여러 파일을 역공정해야 한다. 예를 들어 다음과 같다.

https://github.com/clauderic/dnd-kit/blob/master/stories/2%20-%20Presets/Sortable/1-Vertical.story.tsx

https://github.com/clauderic/dnd-kit/blob/master/stories/2%20-%20Presets/Sortable/Sortable.tsx

또 하나 슬픈 것은 이 위대한 도서관이 React 생태계에 잠겨 있다는 것이다. 그러나 나는 이곳에서 맞춤형 연결을 사용하는 인체공학이 매우 좋다는 것을 인정해야 한다.

반응 테이블 사용

react-table는 또 다른 경량급 맞춤형 react 라이브러리로 사용자가 유틸리티와 연결을 사용하여 UI 구축표를 사용할 수 있도록 한다.이 설명은 내가 이전에 설명한 dnd-kit 과 매우 비슷하게 들릴 수 있습니다. 여기서는 일련의 실용 프로그램과 연결을 사용하여 드래그를 할 수 있습니다.바로 이 때문에 react-table와 dnd-kit가 완벽하게 결합되었다.
이 점을 설명하는 데 도움을 주기 위해서 나는 그들의 예시 중에서 react-table의'기본'예시를 선택했다. https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic 그리고 드래그 지원을 추가했다. 어떻게 실현되었는지 살펴보자.

잇다

지원을 추가하려면 다음 단계를 수행합니다.

설치dnd-kit 패키지: @dnd kit/core, @dnd kit/modifiers, @dnd kit/sortable, @dnd kit/utilities.

DndContext와SortableContext로 책상을 싸라.

는 항목에 대한 정렬을 허용하는 문자열 항목 ID 배열을 SortableContext에 제공합니다.

드래그 이벤트 처리 프로그램을 실행합니다. 그룹의 항목을 다시 정렬하는 데 사용됩니다.

갈고리useSortable를 사용하여 줄을 렌더링합니다.

렌더링 드래그 핸들 버튼 어셈블리.

드래그할 때 렌더링된 행의 CSS 변환입니다.

드래그하면 행의 사용자 정의 뷰가 렌더링됩니다DragOverlay.

한 줄을 드래그할 때 isDragging 속성을 사용하여 배경색을 변경하고 데이터를 숨겨서 사용자가 넣을 슬롯으로 사용합니다.

다음은 dnd-kit와 react-table를 어떻게 사용하여 줄을 다시 정렬할 수 있는지 보여주는 방법입니다.https://codesandbox.io/s/react-table-drag-and-drop-sort-rows-with-dnd-kit-btpy9
이 예는 정말로 그것을 예쁘게 보이게 하는 데 중점을 두는 것이 아니다. 그것은 대량의 조형을 필요로 하여 생산에 더욱 적합하게 해야 하지만, 네가 이 생각을 얻기를 바란다.
예시에서 부족한 가장 중요한 것은 액세스 가능한 사용자 정의 화면 리더 메시지입니다. 프로그램이 모든 사람을 포함할 수 있도록 도와야 합니다.dnd-kit accessibility page에 좋은 예가 하나 있다.
나는 이 라이브러리의 다른 용도를 탐색해서 매우 기쁘다. 일단 요령을 터득하면, 그것은 정말 강대하다.
읽어주셔서 감사합니다!제 작품을 더 많이 읽고 싶으시면 트위터에 팔로우를 해주시거나 마음에 드시면 하나만 주세요coffee☕.