jQuery UI 可排序类选项(1)

📌 相关文章

📜 jQuery UI 可排序类选项(1)

📅 最后修改于: 2023-12-03 14:43:12.881000 🧑 作者: Mango

jQuery UI 可排序类选项介绍

jQuery UI 是 jQuery 中的一个扩展库，它增加了各种用户界面组件和功能。其中之一就是可排序类选项，它可以让用户更方便地拖动和排序元素。

如何启用可排序类选项

使用可排序类选项，需要加载 jQuery UI 库，同时在您的代码中创建一个可排序的列表。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>Sortable Example</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>
  </head>
  <body>
    <ul id="sortable">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
    
    <script>
      $( function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
      } );
    </script>
  </body>
</html>

在上面的示例中，我们首先使用 CSS 和 JavaScript 引入 jQuery UI 库文件。然后我们在 <ul> 元素上调用 sortable() 方法，以激活可排序类选项。最后我们使用 disableSelection() 方法来防止选择文本。

设置排序的选项

可排序类选项可以提供一些选项来帮助您控制排列的过程。下面是一些可用选项：

axis：定义可排序的方向（‘x’ 表示水平，‘y’ 表示垂直）。
containment：指定排序的容器范围。
cursor：拖动元素时的鼠标指针。
handle：指定排序的手柄元素。
tolerance：指定排序的敏感度。

下面是一个示例代码，设置了一些可排序类选项：

$( function() {
  $( "#sortable" ).sortable({
    axis: "y",
    containment: "parent",
    cursor: "move",
    handle: ".handle",
    tolerance: "pointer"
  });
  $( "#sortable" ).disableSelection();
} );

排序完成时触发事件

当您完成对元素的排序后，您可能希望触发一些事件来处理这些排序后的元素。为此，可排序类选项提供了两个事件：sortstart 和 sortstop。

sortstart：开始排序时触发事件。
sortstop：完成排序后触发事件。

下面是一个使用可排序类选项的示例代码，同时利用了 sortstart 和 sortstop 事件：

$( function() {
  $( "#sortable" ).sortable({
    start: function( event, ui ) {
      // 开始排序时的处理代码
    },
    stop: function( event, ui ) {
      // 完成排序后的处理代码
    }
  });
  $( "#sortable" ).disableSelection();
} );

结论

可排序类选项是 jQuery UI 库提供的一个方便的用户界面组件，它可以让用户更方便地拖动和排序元素，同时提供了一些选项来控制排序的过程。您还可以使用 sortstart 和 sortstop 事件来处理排序后的元素。