dnd

实现方案

HTML Drag and Drop API

优点

1. 简洁性：
   • 内置 API，提供了专门的事件和属性，用于处理拖拽操作，代码更加简洁。
   • 处理拖拽操作时无需手动管理鼠标事件，只需监听相关的拖拽事件。
2. 浏览器支持：
   • 支持现代浏览器（IE9+，以及所有现代主流浏览器）。
3. 默认行为和数据传输：
   • 通过 dataTransfer 对象，可以轻松实现拖拽数据的传输。
   • 支持拖拽文件到浏览器窗口等高级功能。
4. 内置处理：
   • 自动处理拖拽图像和光标变化等视觉反馈。

缺点

1. 灵活性：
   • 不适合处理复杂的拖拽需求，如自定义的拖拽行为和动画效果。
   • 对于非元素的拖拽（如页面内的文字选中）支持不佳。
2. 兼容性问题：
   • 某些浏览器的实现可能存在不一致性，需要额外处理跨浏览器的兼容性问题。
   • 在移动设备上的支持有限。
3. 限制：
   • 只能在指定的 draggable 属性的元素上使用。
   • 不适用于所有类型的 DOM 元素（如表单元素）。

react-dnd-html5-backend

MouseEvent

优点

1. 灵活性：
   • 可以完全自定义拖拽行为，适用于复杂的拖拽需求。
   • 适用于所有类型的元素和自定义交互效果。
2. 跨平台：
   • 更容易适配移动设备（通过触摸事件）。
3. 广泛应用：
   • 不受 HTML5 拖拽 API 的限制，可以在更广泛的场景中应用，如拖拽滚动条、调整窗口大小等。

缺点

1. 复杂性：
   • 需要手动管理 mousedown、mousemove 和 mouseup 事件，代码较为复杂。
   • 需要处理鼠标捕获和释放，以避免拖拽过程中出现的问题。
2. 兼容性处理：
   • 需要额外处理跨浏览器的事件差异和兼容性问题。
3. 缺少内置功能：
   • 需要手动实现拖拽图像、光标变化等视觉反馈。
   • 需要手动管理拖拽数据传输，没有内置的 dataTransfer 对象。

dnd-kit

概念

Draggable useDraggable

唯一 id

Droppable useDroppable

唯一 id

当可拖动元素移动到可拖放元素上时，isOver 属性将变为 true。

至少需要将 useDroppable 钩子返回的 setNodeRef 函数传递给 DOM 元素，以便它可以注册底层 DOM 节点并跟踪它以检测与其他可拖动元素的碰撞和交叉。

DndContext

嵌套 DndContext 提供程序时，请记住 useDroppable 和 useDraggable 钩子只能访问该上下文中的其他可拖动和可拖放节点。

如果多个 DndContext 提供程序正在侦听同一事件，则第一个 DndContext 将捕获事件，该 DndContext 包含由该事件激活的 Sensor，类似于事件在 DOM 中冒泡的方式。

包含 Draggable Droppable

Sensors

传感器是一种抽象，用于检测不同的输入方法，以便启动拖动操作、响应移动以及结束或取消操作。

• Pointer
• Mouse
• Touch
• Keyboard

Modifiers

修改器允许您动态修改传感器检测到的运动坐标

• 将运动限制为单个轴
• 将运动限制为可拖动节点容器的边界矩形
• 将运动限制为可拖动节点的滚动容器边界矩形
• 施加阻力或夹紧运动

DragOverlay DraggableClone

提供了一种呈现可拖动覆盖层的方法，该覆盖层从正常文档流中删除，并相对于视口定位。