dnd-kit:https://github.com/clauderic/dnd-kit
在使用dnd-kit
作为拖拽库时,可能会遇到拖拽的组件中包含可交互的组件。例如一个input
或者button
,当绑定上事件之后,例如click
,这时浏览器会优先响应拖拽事件,那么点击事件就无效了。
useSensor(PointerSensor, {
activationConstraint: {
distance: 5,
},
})
使用传感器,设置鼠标传感器,当距离小于5是不响应拖拽事件。
缺点:拖拽要>5才会生效,看起来有一点点卡顿。
import type { MouseEvent } from 'react'
import { MouseSensor } from '@dnd-kit/core'
export class MouseSensorCustomize extends MouseSensor {
static activators = [
{
eventName: 'onMouseDown' as const,
handler: ({ nativeEvent: event }: MouseEvent) => {
return shouldDragEvent(event.target)
}
}
]
}
function shouldDragEvent(element: HTMLElement | null) {
let current = element;
while (current) {
if (current?.dataset?.noDrag) {
return false;
}
cur = current.parentElement;
}
return true;
}
---- using ----
<Button data-no-drag="true"/>
使用html
的data属性来标记这个标签是否能拖动,true则是不能拖动。
缺点:可交互的元素就不能再响应拖动事件。
useSensor(PointerSensor, {
activationConstraint: {
delay: 10,
tolerance: 10,
},
})
delay
表示在按住拖拽元素多久之后才能拖动,tolerance
表示在拖动操作终止前容忍的拖动距离。
缺点:拖拽的动作需要等待一小段时间。