Draggable

dnd-kit 我称之为拖拽组件中的王者 git链接文章地址 用过react-dnd和react-beautiful-dnd都没有dnd-kit组件灵便以及裸露的数据多（也可能是我钻研的不够深） 应用场景及可实现性能实现画布类拖拽 元素是否被拖拽元素区域是否被拖入（data数据利用）元素区域是否被拖出（data数据利用）元素区域可接管哪些类型的元素拖入（data数据利用）定位元素拖拽（碰撞算法内可做解决）拖拽类组件大差不差，有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，不便数据处理 ...