vue 自由拖拽vue3-dnd(五)

vue 自由拖拽vue3-dnd(五)-Monitors

DragSourceMonitor

DragSourceMonitor 是传递给DragSource拖动源的对象。它提供了一些方法，让你可以获取到有关拖动源的一些状态信息。绑定到该监视器的特定拖动源在下面称为监视器的所有者。

方法

方法名	类型	说明
canDrag()	() => boolean	如果没有正在进行的拖动操作，并且所有者useDrag的canDrag()方法返回true或者undefined，则返回true，否则返回false。
isDragging()	() => boolean	如果正在进行的拖动操作，并且所有者正在被拖动，或者useDrag的isDragging()方法返回true，该方法就会返回true，否则返回false。
getItemType()	() => (string | null)	返回标识当前拖动项的类型type。如果没有项目被拖动，则返回null。
getItem()	() => (object | null)	返回表示当前拖动项的普通对象。每个拖动源必须通过从其item属性来指定它。如果没有项目被拖动，则返回null。
getDropResult()	() => (object | null)	返回一个表示最后记录的放置结果的普通对象。 放置目标可以通过从它们的drop()方法返回一个对象来指定它。 当放置目标为嵌套目标时，任何显式地从drop()返回自己的结果的父对象都会覆盖之前由子对象设置的drop结果。 它只能在end()内部调用，如果在end()外部调用，则返回null。
didDrop()	() => boolean	如果某个拖放目标已经处理了拖放事件则返回true，否则返回false。即使目标没有返回放置结果，didDrop()也会返回true。 可以在end()中使用它来检查是否有放置目标已经处理了这次拖拽。 如果在end()外部调用，则返回false。
getInitialClientOffset()	() => { x: number, y: number }	返回当前拖动开始时鼠标指针相对于客户端的初始位置{x, y}。 如果没有项目被拖动，则返回null。
getInitialSourceClientOffset()	() => { x: number, y: number }	返回当前拖动开始时，拖动源的根DOM节点相对于客户端的初始位置{x, y}。 如果没有项目被拖动，则返回null。
getClientOffset()	() => { x: number, y: number }	返回拖动起始点的鼠标指针相对于客户端的偏移量{x, y}。 如果没有项目被拖动，则返回null。
getDifferenceFromInitialOffset()	() => { x: number, y: number }	返回当前拖动中鼠标指针相对于开始拖动时的鼠标指针位置的偏移量{x, y}。 如果没有项目被拖动，则返回null。
getSourceClientOffset()	() => { x: number, y: number }	返回当前拖动源的根DOM节点相对于客户端的偏移量{x, y}。 如果没有项目被拖动，则返回null。

注意 ，如果需要获取鼠标的 实时轨迹 （实时的Offset），应该关注一下 DropTargetMonitor 中的回调，比如 hover

DropTargetMonitor

DropTargetMonitor 是传递给DropTarget放置目标的对象。它提供了一些方法，让你可以获取到有关放置目标的一些状态信息。绑定到该监视器的特定放置目标在下面称为监视器的所有者。

方法

方法名	类型	说明
canDrop()	() => boolean	如果有正在进行的拖动操作，并且所有者useDrop的canDrop()方法返回true或者undefined，则返回true，否则返回false。
isOver()	(options?: { shallow: boolean }) => boolean	如果有正在进行的拖动操作，并且指针当前悬停在所有者的上方，则返回true。你可以选择通过{shallow: true}来严格检查是否只有所有者被悬浮，而不是嵌套的目标。
getItemType()	() => (string | null)	返回标识当前拖动项的类型type。如果没有项目被拖动，则返回null。
getItem()	() => (object | null)	返回表示当前拖动项的普通对象。每个拖动源必须通过从其item属性来指定它。如果没有项目被拖动，则返回null。
getDropResult()	() => (object | null)	返回一个表示最后记录的放置结果的普通对象。 放置目标可以通过从它们的drop()方法返回一个对象来指定它。 当放置目标为嵌套目标时，任何显式地从drop()返回自己的结果的父对象都会覆盖之前由子对象设置的drop结果。 它只能在drop()内部调用，如果在drop()外部调用，则返回null。
didDrop()	() => boolean	如果某个拖放目标已经处理了拖放事件则返回true，否则返回false。即使目标没有返回放置结果，didDrop()也会返回true。 可以在drop()中使用它来检查是否有放置目标已经处理了这次拖拽。如果在drop()外部调用，则返回false。
getInitialClientOffset()	() => { x: number, y: number }	返回当前拖动开始时鼠标指针相对于客户端的初始位置{x, y}。 如果没有项目被拖动，则返回null。
getInitialSourceClientOffset()	() => { x: number, y: number }	返回当前拖动开始时，拖动源的根DOM节点相对于客户端的初始位置{x, y}。 如果没有项目被拖动，则返回null。
getClientOffset()	() => { x: number, y: number }	返回当前拖动中鼠标指针相对于客户端的偏移量{x, y}。 如果没有项目被拖动，则返回null。
getDifferenceFromInitialOffset()	() => { x: number, y: number }	返回当前拖动中鼠标指针相对于开始拖动时的鼠标指针位置的偏移量{x, y}。 如果没有项目被拖动，则返回null。
getSourceClientOffset()	() => { x: number, y: number }	返回当前拖动源的根DOM节点相对于客户端的偏移量{x, y}。 如果没有项目被拖动，则返回null。

DragLayerMonitor

DragLayerMonitor 是传递给DragLayer拖动层collect收集函数的对象。它提供了一些方法，让你可以获取到全局拖放状态信息。

方法

方法名	类型	说明
isDragging()	() => boolean	如果正在进行的拖动操作，并且所有者正在被拖动，或者useDrag的isDragging()方法返回true，该方法就会返回true，否则返回false。
getItemType()	() => (string | null)	返回标识当前拖动项的类型type。如果没有项目被拖动，则返回null。
getItem()	() => (object | null)	返回表示当前拖动项的普通对象。每个拖动源必须通过从其item属性来指定它。如果没有项目被拖动，则返回null。
getInitialClientOffset()	() => { x: number, y: number }	返回当前拖动开始时鼠标指针相对于客户端的初始位置{x, y}。 如果没有项目被拖动，则返回null。
getInitialSourceClientOffset()	() => { x: number, y: number }	返回当前拖动开始时，拖动源的根DOM节点相对于客户端的初始位置{x, y}。 如果没有项目被拖动，则返回null。
getClientOffset()	() => { x: number, y: number }	返回当前拖动中鼠标指针相对于客户端的偏移量{x, y}。 如果没有项目被拖动，则返回null。
getDifferenceFromInitialOffset()	() => { x: number, y: number }	返回当前拖动中鼠标指针相对于开始拖动时的鼠标指针位置的偏移量{x, y}。 如果没有项目被拖动，则返回null。
getSourceClientOffset()	() => { x: number, y: number }	返回当前拖动源的根DOM节点相对于客户端的偏移量{x, y}。 如果没有项目被拖动，则返回null。