拖拽组件的王者，dnd-kit。抛弃React-dnd吧

React身为web开发SPA的超级大户，相信大家都用过react-dnd和react- beautiful-dnd完成过一些复杂场景下的拖拽功能。

但是这两个库的灵活性以及暴露的数据与dnd-kit相比还是有点差距。可能是梦兽编程个人感受吧，如有差不多的感觉可以评论区说说你的看法。

react-dnd已经是一个非常不错的依赖库，但是dnd-kit设计起来更加现代化，轻量级，高性能，容易访问和扩展到web应用中。

它可以让你很容易Jira工作台看板的功能。

安装

要在 React 项目中使用 Dnd Kit，首先需要安装其核心库。可以通过以下命令进行安装：

bash 复制代码

npm install @dnd-kit/core

此外，Dnd Kit 还提供了其他可选的包，如修饰器（modifiers）和排序包（sortable package），这些可以根据需要安装。

基本概念

Dnd Kit 的核心是三个主要的组件：DndContext、Draggable 和 Droppable。

DndContext：作为父组件，管理拖放操作的上下文环境。
Draggable：表示可以拖动的元素。
Droppable：表示可以放置拖动元素的目标区域。

这三个组件使用起来会比react-dnd更加方便。

使用方法

实现拖放功能的基本步骤如下：

创建 Draggable 组件 ：定义一个可拖动的元素，并使用 useDraggable 钩子来提供拖动功能。
创建 Droppable 组件 ：定义一个可放置的区域，并使用 useDroppable 钩子来处理元素的放置逻辑。
组合组件 ：将 Draggable 和 Droppable 组件放置在 DndContext 内部，以确保它们之间的正确交互。

示例

以下是一个简单的拖放示例，展示了如何使用 Dnd Kit 创建一个可拖动的按钮和一个可放置的区域：

jsx 复制代码

import React from "react";
import { DndContext } from "@dnd-kit/core";

import { Draggable } from "./Draggable";
import { Droppable } from "./Droppable";

function App() {
  return (
    <DndContext>
      <Draggable />
      <Droppable />
    </DndContext>
  );
}

rust 复制代码

// Draggable.jsx
import React from 'react';
import { useDraggable } from '@dnd-kit/core';

export function Draggable(props) {
    const { attributes, listeners, setNodeRef, transform } = useDraggable({
        id: 'draggable',
    });
    
    // attributes： 一个对象，包含使组件可拖动所需的 HTML 属性
		// listeners： 包含用户拖动组件时触发的事件监听器的对象
		// setNodeRef： 用于设置组件 DOM 节点引用的函数
		// transform： 一个对象，包含组件当前的 x 和 y 移位（以像素为单位）
    
    const style = transform ? {
        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
    } : undefined;

    return (
        <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
            {props.children}
        </button>
    );
}

rust 复制代码

import React from 'react';
import { useDroppable } from '@dnd-kit/core';

export function Droppable(props) {
    const { isOver, setNodeRef } = useDroppable({
        id: 'droppable',
    });
    
    // isOver: 布尔值，表示可拖动组件当前是否位于可下垂组件的上方
    // setNodeRef: 用于设置组件 DOM 节点引用的函数
    
    const style = {
        color: isOver ? 'blue' : undefined,
    };

    return (
        <div ref={setNodeRef} style={style}>
            {props.children}
        </div>
    );
}

最后添加end事件在DndContext中

rust 复制代码

 function handleDragEnd(event) {
    const {active, over} = event;
    
    if (active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.indexOf(active.id);
        const newIndex = items.indexOf(over.id);
        
        return arrayMove(items, oldIndex, newIndex);
      });
    }
  }
  
  // 需要注意的是 id 需要在 使用 useDroppable 提前注册
  useDroppable({
  id: props.id,
  data: {
    index: props.index,
  },
  })
  
  // 如果你需要提取data的话是 active.data.current.index

样式和自定义

Dnd Kit 提供了强大的 API，允许开发者自定义拖动元素的外观和行为。通过 CSS 样式和自定义钩子，可以轻松实现个性化的拖放效果。

rust 复制代码

// 拖动的过程我吗可以拿到setNodeRef，Dom的引用进行Dom操作

<button ref={setNodeRef}></button>

setNodeRef.current.style.xxxx = 'xxxxx';

结语

Dnd Kit 是一个高效、灵活且易于使用的 React 拖放工具包。它不仅适用于简单的拖放场景，也能够应对复杂的交互需求。无论你是初学者还是经验丰富的开发者，Dnd Kit 都是一个值得尝试的现代前端工具。