关于draggable:拖拽组件-dndkit

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

git链接
文章地址

用过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兼容应用，本人入手尝试一下吧~

以上都为本人应用过程中用到的办法，还有很多场景或形式没有尝试，但dndkit能够实用于更多的场景和形式，真的值得尝试，yyds
以上如果有谬误的中央，欢送斧正~~