jQuery UI Draggable revertDuration 选项

jQuery UI Draggable 是一个流行的用户界面控件，它允许用户通过拖动来移动页面上的元素。其中一个选项是 revert，它表示当用户释放鼠标时，被拖动的元素是否应该回到原来的位置。

revertDuration 是与 revert 选项相关的一个值。它表示回归到原来的位置所需的时间，以毫秒为单位。默认情况下，revertDuration 值为 500（即 0.5 秒）。

语法

$( ".selector" ).draggable({
  revert: true,
  revertDuration: 500
});

用法

默认情况下的回归效果

在默认情况下，如果将 revert 选项设置为 true，被拖动的元素将在回归到原来的位置之前先移动回去。这里是一个例子：

<div id="draggable" class="ui-widget-content">
  <p>拖动我</p>
</div>

$( "#draggable" ).draggable({
  revert: true
});

在上面的代码中，当用户释放鼠标按钮时，被拖动的元素将从当前位置移动回原来的位置。

改变回归时间

如果想改变回归时间，可以使用 revertDuration 选项。这里是一个例子：

<div id="draggable" class="ui-widget-content">
  <p>拖动我</p>
</div>

$( "#draggable" ).draggable({
  revert: true,
  revertDuration: 1000  // 1秒钟
});

在上面的代码中，当用户释放鼠标按钮时，被拖动的元素将需要 1 秒钟的时间回归到原来的位置。

禁用回归效果

如果不想使用回归效果，可以将 revert 选项设置为 false。这里是一个例子：

<div id="draggable" class="ui-widget-content">
  <p>拖动我</p>
</div>

$( "#draggable" ).draggable({
  revert: false
});

在上面的代码中，当用户释放鼠标按钮时，被拖动的元素将保留在它的当前位置。

结论

revertDuration 选项与 revert 选项一起使用，可以改变被拖动元素回归到它的原始位置所需的时间。如果将 revert 选项设置为 false，被拖动的元素将保留在它的当前位置。