Repolode
clauderic

clauderic/dnd-kit

웹용 최신 경량 드래그 앤 드롭 툴킷으로, 프레임워크에 종속되지 않는 코어와 React, Vue, Svelte, SolidJS 어댑터를 제공합니다.

스타
17,738
포크
927
열린 이슈
134
마지막 커밋
7일 전

어떤 프로젝트인가요?

dnd-kit은 웹에서 인터랙티브한 인터페이스를 만들기 위한 드래그 앤 드롭 툴킷입니다. 프레임워크에 종속되지 않는 코어(@dnd-kit/abstract), DOM 구현(@dnd-kit/dom), React, Vue, Svelte, SolidJS용 얇은 어댑터로 구성되어 있으며, 순수 JavaScript로도 사용할 수 있습니다.

목록, 그리드, 여러 컨테이너, 중첩된 컨텍스트, 크기가 제각각인 항목, 가상화된 목록을 지원합니다. 포인터, 마우스, 터치, 키보드 센서를 기본 제공하며, 센서와 충돌 감지 알고리즘, 키 바인딩을 개발자가 교체할 수 있습니다. 코어를 기반으로 일반적인 순서 변경 가능 목록을 위한 정렬 레이어(@dnd-kit/dom/sortable)도 제공합니다.

키보드 지원, 기본 ARIA 속성, 사용자 지정 가능한 스크린 리더 안내 문구와 라이브 영역을 통해 접근성을 지원합니다. TypeScript로 작성되었으며 MIT 라이선스로 배포됩니다.

핵심 기능

  • 01프레임워크에 종속되지 않는 코어와 React, Vue, Svelte, SolidJS 어댑터
  • 02포인터, 마우스, 터치, 키보드 센서 기본 제공
  • 03목록, 그리드, 여러 컨테이너, 가상화된 목록 지원
  • 04센서, 충돌 감지, 키 바인딩 사용자 지정 가능
  • 05순서 변경 가능 목록을 위한 코어 기반 정렬 레이어
  • 06접근성을 위한 키보드 지원 및 기본 ARIA 속성

활용 사례

  • React 또는 Vue 앱에서 정렬 가능한 목록이나 칸반 스타일 보드 만들기
  • 여러 컨테이너를 사용하는 드래그 앤 드롭 그리드 또는 레이아웃 만들기
  • 웹 인터페이스에 터치와 키보드로 접근 가능한 순서 변경 기능 추가하기

빠른 시작

  1. 1

    프레임워크를 선택하고 dndkit.com의 빠른 시작 가이드를 따라 하세요

  2. 2

    bun으로 모노레포 의존성을 설치하세요

    bun install
  3. 3

    개발 모드를 시작하세요

    bun run dev

토픽

자주 묻는 질문

dnd-kit은(는) 무엇인가요?
웹용 최신 경량 드래그 앤 드롭 툴킷으로, 프레임워크에 종속되지 않는 코어와 React, Vue, Svelte, SolidJS 어댑터를 제공합니다. dnd-kit은 웹에서 인터랙티브한 인터페이스를 만들기 위한 드래그 앤 드롭 툴킷입니다. 프레임워크에 종속되지 않는 코어(@dnd-kit/abstract), DOM 구현(@dnd-kit/dom), React, Vue, Svelte, SolidJS용 얇은 어댑터로 구성되어 있으며, 순수 JavaScript로도 사용할 수 있습니다.
dnd-kit은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
dnd-kit은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
dnd-kit은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. dnd-kit의 마지막 커밋은 2026년 10월 15일입니다.
dnd-kit은(는) 어디에 사용할 수 있나요?
React 또는 Vue 앱에서 정렬 가능한 목록이나 칸반 스타일 보드 만들기 여러 컨테이너를 사용하는 드래그 앤 드롭 그리드 또는 레이아웃 만들기 웹 인터페이스에 터치와 키보드로 접근 가능한 순서 변경 기능 추가하기
dnd-kit는 어떻게 설치하나요?
프레임워크를 선택하고 dndkit.com의 빠른 시작 가이드를 따라 하세요 bun으로 모노레포 의존성을 설치하세요: bun install 개발 모드를 시작하세요: bun run dev
dnd-kit은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/clauderic/dnd-kit

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트