解决dnd-kit点击事件和拖拽事件的冲突

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表示在拖动操作终止前容忍的拖动距离。
缺点：拖拽的动作需要等待一小段时间。

这篇好文章是转载于：学新通技术网