DND-Kit：React拖放工具箱完全指南

DND-Kit：React拖放工具箱完全指南

dnd-kit The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React. 项目地址: https://gitcode.com/gh_mirrors/dn/dnd-kit

项目介绍

DND-Kit 是一个现代、轻量级、高性能、易于访问且可扩展的React拖放库。它设计用于简化在React应用中实现复杂拖放交互的过程，不强加额外的架构要求或DOM包装节点。这个工具包重量仅有约10KB（minified），并且没有外部依赖，通过利用React的状态管理和上下文保持精简。DND-Kit提供了丰富的特性，如自定义碰撞检测算法、多个激活器、拖动时的遮罩层、自动滚动、约束条件等，并原生支持多种输入方式（指针、鼠标、触摸和键盘）。

项目快速启动

要迅速开始使用DND-Kit，首先确保你的环境已安装Node.js。之后，可以通过以下步骤集成到你的项目：

# 使用npm
npm install @dnd-kit/core @dnd-kit/sortable

# 或者如果你更喜欢yarn
yarn add @dnd-kit/core @dnd-kit/sortable

基础示例

创建一个简单的列表排序组件：

import { DndContext, closestCenter, MouseSensor, TouchSensor } from '@dnd-kit/core';
import { SortableContext, useSortable, arrayMove } from '@dnd-kit/sortable';
import { useState } from 'react';

const items = ["Item 1", "Item 2", "Item 3"];

function App() {
  const [sortedItems, setSortedItems] = useState(items);

  const handleOnDragEnd = (result) => {
    if (!result.destination) return;

    setSortedItems(arrayMove(sortedItems, result.source.index, result.destination.index));
  };

  return (
    <DndContext sensors={[MouseSensor, TouchSensor]} onDragEnd={handleOnDragEnd}>
      <SortableContext items={sortedItems} strategy={horizontalListSortingStrategy}>
        {sortedItems.map((item, index) => (
          <SortableItem key={item} index={index} item={item} />
        ))}
      </SortableContext>
    </DndContext>
  );
}

function SortableItem({ index, item }) {
  const { dragging, handlerProps, ...dragHandleProps } = useSortable({ id: item });

  return (
    <div style={{ opacity: dragging ? 0.5 : 1 }}>
      <div {...handlerProps} {...dragHandleProps}>{item}</div>
    </div>
  );
}

应用案例和最佳实践

在构建复杂的布局调整、列表排序、甚至游戏元素拖放时，DND-Kit提供的灵活性让你可以轻松定制动画、行为、样式等。重要的是考虑用户体验和无障碍性，比如合理设置ARIA属性，提供屏幕阅读器的指令和实时更新。

最佳实践

• 无障碍性: 利用DND-Kit的内置功能来添加适当的ARIA属性，确保键盘导航和屏幕阅读器友好。
• 性能优化: 利用translate3d和scaleCSS属性进行平滑动画处理，减少DOM重排。
• 定制化: 根据需要定制传感器和碰撞检测策略，以满足特定的应用场景。

典型生态项目

虽然DND-Kit本身是核心库，但通过社区的贡献和预设方案，它可以扩展到不同的应用场景。例如，@dnd-kit/sortable就是专为创建排序界面而设计的预设，简化了这类常见需求的实现过程。此外，由于其模块化的结构，开发者可以开发更多预设来适配表格、网格布局等多种情景，增强React应用中的拖放体验。

---

以上为你展示了DND-Kit的基本使用方法和一些关键点，这只是一个开始。深入探索DND-Kit的官方文档将帮助你解锁更多的高级特性和定制选项，打造更加丰富和响应式的拖放界面。

dnd-kit The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React. 项目地址: https://gitcode.com/gh_mirrors/dn/dnd-kit