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

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

jQuery UI Draggable 还原选项

在开发中，我们经常需要进行元素拖拽操作，jQuery UI Draggable 提供了一个简单易用的方案。其中，它提供了一个 revert 选项，可用于在拖拽结束后返回原始位置或设定的位置。

语法
$(selector).draggable({
  revert: Boolean | Number | String | Function
});

其中，revert 选项可接受四种类型的值：布尔值、数字（单位为毫秒）、字符串和函数。

  • 布尔值：默认为 false，表示拖拽结束后不返回原始位置。如果设为 true，则会立即返回原始位置。
  • 数字：表示拖拽结束后返回原始位置的动画持续时间。
  • 字符串：表示拖拽结束后返回预定义位置。可以是字符串 'invalid'（返回原始位置），'valid'（返回指定位置）或 jQuery 选择器（返回指定元素）。
  • 函数：返回一个布尔值，表示拖拽结束时是否要返回原始位置。这个函数可以通过 this 关键字访问当前拖拽的元素。
实例

在下面的示例中，我们创建了一个方块，可以通过拖拽改变它的位置。当然，当方块不在指定范围内时，拖拽结束后会自动返回其预设位置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Draggable 还原选项示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    #draggable {
      width: 100px;
      height: 100px;
      background-color: orange;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    #container {
      width: 400px;
      height: 400px;
      border: 1px solid gray;
      margin: 50px auto;
      position: relative;
    }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <div id="container">
    <div id="draggable"></div>
  </div>

  <script>
    $('#draggable').draggable({
      containment: '#container',
      revert: 'invalid'
    });
  </script>
</body>
</html>
结语

jQuery UI Draggable 的 revert 选项可以方便地实现元素的还原效果，并提供了多种设定方式。如果你需要进行拖拽操作，不妨尝试一下这个功能。