vue自由拖拽vue3-dnd(二)

vue 自由拖拽vue3-dnd(二)-基础

react-dnd 基础概念

项目(Items) 和 类型(Types)

• React DnD 使用数据 而不是视图作为拖拽实施。
• 在屏幕上拖动某些东西时，称为正在拖动某种类型的项目。
• 项目是描述被拖动内容的 纯 JavaScript 对象。
• 类型是一个字符串（或一个符号），用于 唯一标识 应用程序中的一整类项目。
• 类型很有用，因为随着项目的庞大，你可能希望更多的东西可拖动，但你不一定希望所有现有的放置目标突然可以接收新项目的放置。类型让你可以指定拖放源和拖放目标。

监视器(Monitors)

拖放本质上是有状态的。拖动操作正在进行中，或者没有。要么有当前类型和当前项目，要么没有。这种状态必须存在于某个地方。

对于每个需要跟踪拖放状态的组件，您可以定义一个收集函数，从监视器中提取状态。

假设你想在拖动棋子的时候突出显示允许放置的 Cell 单元格，组件 Cell 的收集函数可能如下所示：

const [collect, drop] = useDrop({
  accept: 'Cell',
  collect: monitor => ({
    canDrop: monitor.canDrop(),
    hovered: monitor.isOver(),
  }),
})

canDrop 表示拖动元素可以放置到当前元素，hovered 表示拖动元素正在当前元素上

拖拽源(Drag Sources) 和 拖放目标 (Drop Targets)

• 使用拖拽源 dragSource 来表示拖拽的元素
• 使用拖放目标 drop 来表示目标接收拖拽元素

Backend

• Backend 抽象出了浏览器的差异并处理原生 DOM 事件。
• 所有 Backend 所做的就是将 DOM 事件转换为 React DnD 可以处理的内部 Redux 操作。
• 受益于 React DnD 的设计，vue3-dnd 直接采用它的 HTML5 Backend , Touch Backend 和 Test Backend ，甚至是一些自定义的 Backend

结论

相信您已经理解了 React DnD 的一部分核心概念, 加详细的介绍可以参考 React DnD 概述

后续我会讲一些基础的用法，尽请期待