拖拽组件 dnd-kit

知乎up主的视频教程链接：

分享一款宝藏级拖拽库,github标星3.6k – 徐小夕的视频 – 知乎 https://www.zhihu.com/zvideo/1465711177497681920

dnd-kit 我称之为拖拽组件中的王者

git链接      https://toscode.gitee.com/mirrors/dnd-kit

github地址      https://github.com/clauderic/dnd-kit

文章地址      https://docs.dndkit.com/

用过react-dnd和react-beautiful-dnd都没有dnd-kit组件灵活以及暴露的数据多（也可能是我研究的不够深）

使用场景及可实现功能

实现画布类拖拽

1. 元素能否被拖拽
2. 元素区域能否被拖入（data数据应用）
3. 元素区域能否被拖出（data数据应用）
4. 元素区域可接收哪些类型的元素拖入（data数据应用）
5. 定位元素拖拽（碰撞算法内可做处理）

拖拽类组件大差不差，有dragContext、drop、drag组件，浅显理解context实现数据共享，drop为可被拖拽的区域，drag为可被拖拽的元素
使用方式看文章，不做讲解

<DndContext
         // dndkit自带碰撞算法，不传则默认为rectIntersection
        // collisionDetection={rectIntersection}
        // collisionDetection={pointerWithin}
        /**
         * 碰撞算法优化
         *     自定义碰撞算法
         */
        collisionDetection={customCollisionDetectionStrategy}                          ‘
        /**
         * 传感器配置
         */
        sensors={sensors}
        onDragStart={res => {
          console.log({ onDragStartMove: res });
          // 自己打印看吧
        }}
        onDragEnd={(res: DragEndEvent) => {
          console.log({ onDragEnd: res });
         // 拖拽结束（会返回拖拽的当前元素信息及丢弃（放置）到指定位置的元素信息，可能为null）
        }}>
        {children}
        <DragOverlay>
        // 自定义的标识 draggingId - 当前正在被拖拽的元素id
          {draggingId ? (
            <div
              style={{
              //  被拖拽元素样式
              }}></div>
          ) : null}
        </DragOverlay>
<DndContext>

碰撞算法

collisionDetection自定义碰撞算法，dndkit会提供一些数据，用户可以在数据基础上进行处理

const customCollisionDetectionStrategy = (rects) => {
    /**
     * active 当前拖拽元素及其data
     * collisionRect 碰撞元素data
     * pointerCoordinates 当前指针坐标
     * droppableContainers 所有dropabble对象->arr
          data: {current: {…}}
          id: ""
          key: "Droppable-0", // dndkit给对象增加的字段，可用于排序，数值越大代表当前元素嵌套最深（最上层）
          node: {current: '当前元素'}
          rect: {current: bottom: 0, height: 96, left: 0, right: 0, top: 0, width: 1920}
     */
    const { active, collisionRect, pointerCoordinates, droppableContainers } = rects;

    // ... 数据处理，需返回碰撞到的元素数组（进行排序）第一个为当前碰撞到的元素
    return arr; 
}

传感器

  const sensors = useSensors(useSensor(MouseSensor));
// MouseSensor dndkit提供的传感器，默认是使用所有传感器，我这里只使用了mouse传感器，碰撞检测返回的数据可能和当前传感器有关联？我这里没做尝试，但碰撞算法确实是依托于鼠标位置做的处理

使用drag或drop时可带额外参数

在使用别的拖拽组件时，很多数据处理会很麻烦，dndkit提供了data方式，可以在所有方法里或碰撞算法里返回这些data，方便数据处理

  // drag初始化  drop也一样，官方文档里有
  const { attributes, listeners, setNodeRef } = useDraggable({
    id: dragId,
    disabled: isDragDisabled, // 是否允许拖拽
    data: { // 自定义参数，需要的数据放这里
      ...otherProps,
    },
  });

  // 赋值拖拽过程中的位移样式, 使用dragOverlay则不赋值style
  // const style = {
  //   transform: CSS.Translate.toString(transform),
  // };

  <div
        ref={setNodeRef}
        // dragOverly 使用时，不给当前元素赋值
        // style={style}
        {...listeners}
        {...attributes}></div>

dragOverly

使用dragOverly相当于不更改原对象，当拖拽时会复制一个新的div（记得将被拖拽的元素的样式赋值给dragOverly）

拖拽还可以与resize兼容使用，自己动手尝试一下吧~

本期内容就到这里啦～以上内容均可在 方包博客「http://fang1688.cn」 网站直接搜索名称访问哦。欢迎感兴趣的小伙伴试试，如果本文对您有帮助，也请帮忙点个 赞 + 在看 啦！❤️

欢迎大家加入方包的「优派编程」学习圈子，和多名小伙伴们一起交流学习，向方包 1 对 1 提问、跟着方包做项目、领取大量编程资源等。Q群「891029429」欢迎想一起学习进步的小伙伴~

另外方包最近开发了一款工具类的小程序「方包工具箱」,功能包括：抖音、小红书、快手去水印，天气预报，小说在线免费阅读（内含上万部热门小说），历史今天，生成图片二维码,图片识别文字，ai伪原创文章，数字摇号抽奖,文字转语音MP3功能...

‍‍‍ ⬇️ 点击链接阅读原文直达 方包博客