📌  相关文章
📜  jQuery UI Draggable revertDuration 选项(1)

📅  最后修改于: 2023-12-03 15:16:44.730000             🧑  作者: Mango

使用 jQuery UI Draggable revertDuration 选项

jQuery UI 是一个 jQuery 的扩展库，它提供了大量的交互式控件和实用程序，其中之一是 "draggable"，它允许您使元素可拖动。

"revertDuration" 选项是 "draggable" 控件的一个选项，用于指定元素回归其起始位置所需的时间。在本文中，我们将介绍如何使用这个选项。

语法
$(selector).draggable({
  revertDuration: value
});

其中：

  • selector：要应用 "draggable" 控件的元素选择器。
  • value：以毫秒为单位指定元素回归起始位置所需的时间。默认为 500 毫秒。
实例

以下示例演示了如何使用 "revertDuration" 选项。当拖动元素时，它将回归起始位置，需要 1 秒钟的时间。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Draggable revertDuration 选项</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    #draggable {
      width: 150px;
      height: 150px;
      border: solid 1px black;
      margin-top: 20px;
    }
  </style>
  <script>
    $(function() {
      $("#draggable").draggable({
        revert: true,
        revertDuration: 1000
      });
    });
  </script>
</head>
<body>
  <div id="draggable" class="ui-widget-content">
    <p>这个元素可以被拖动。</p>
  </div>
</body>
</html>

在上面的示例中，我们将 "revert" 选项设置为 true，以便当在容器外放置元素时，它将恢复到其起始位置。同时，我们将 "revertDuration" 选项设置为 1000 毫秒，以使恢复到其起始位置需要 1 秒钟的时间。

结论

"revertDuration" 选项是 "draggable" 控件的一个选项，用于指定元素回归其起始位置所需的时间。与 "revert" 选项一起使用，可以让元素回归其起始位置，并给人们一个更好的用户体验。