jQuery UI 可拖动延迟选项

在使用 jQuery UI 的可拖动组件时，我们可以通过配置选项实现拖动的延迟效果，即鼠标按下去后不会立即拖动，而是在一定时间后才开始拖动。这个效果可以提升用户体验，避免意外拖动。

延迟选项

jQuery UI 的拖动组件（Draggable）提供了两个延迟选项，分别为 delay 和 distance。

delay

delay 选项控制延迟的时间，其值为毫秒数。默认值为 0，即没有延迟效果。

$( ".selector" ).draggable({
  delay: 1000 // 延迟1秒
});

distance

distance 选项控制在开始拖动前，鼠标必须移动的距离。默认值为 1，即只要鼠标移动了一点点就开始拖动。

$( ".selector" ).draggable({
  distance: 10 // 鼠标必须移动10像素才开始拖动
});

注意事项

1. 延迟选项只对鼠标左键有效，对其它按键没有影响。

2. 如果同时设置了 delay 和 distance，则以先到达目标值为准，另一个选项将不再起作用。

3. 如果设置了 cursorAt 选项，则 distance 选项将以 cursorAt 为基准计算。

总结

通过配置延迟选项，我们可以实现拖动的延迟效果，提升用户体验。其中 delay 控制延迟时间，distance 控制鼠标移动距离。如果想要实现更好的交互效果，可以适当调整这些选项的值。