@dnd-kit 拖曳事件衝突解決方式

6 天前

內容目錄 隱藏

若拖曳的區塊內還有其他點擊事件，點擊時會默認為拖曳，導致無法正確執行點擊事件。

dnd-kit 拖曳觸發條件

Pointer Sensor 有兩種 activation constraints，兩者只能擇一:

DistanceConstraint
- 要滑鼠(或手指)移動超過 distance 像素，才算開始拖曳。
- 例如：distance: 5 → 移動少於 5px 就不會被視為是在拖曳。
DelayConstraint
- 要按住超過 delay 毫秒，才算開始拖曳。
- tolerance 是按住時允許的位移範圍(像是手指在螢幕上稍微晃動也不會取消)。

方法 1：用 DistanceConstraint

useSensor(PointerSensor, {
  activationConstraint: {
    distance: 5,
  },
}),

useSensor(PointerSensor, {
  activationConstraint: {
    distance: 5,
  },
}),

方法 2：用 DelayConstraint (適合觸控)

useSensor(PointerSensor, {
  activationConstraint: {
    delay: 200,
    tolerance: 5
  }
})

useSensor(PointerSensor, {
  activationConstraint: {
    delay: 200,
    tolerance: 5
  }
})