jQuery UI Sortable Handle|极客教程

jQuery UI Sortable Handle

在使用 jQuery UI Sortable 插件进行排序时，可以通过指定 handle 元素来限制拖动的操作。handle 元素是一个可以拖动的元素，当用户点击该元素并拖动时，只有该元素才会移动，而不是整个可排序的元素。这在某些情况下非常有用，例如在一个列表中有复杂的内部结构，但只想让特定的元素来触发排序。本文将详细介绍如何在使用 jQuery UI Sortable 插件时使用 handle 参数。

使用 handle 参数

要在 jQuery UI Sortable 中使用 handle 参数，只需要在初始化 Sortable 时指定 handle 选项，并将其设为要作为 handle 的元素的选择器。例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sortable Handle Example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
  #sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
  }
  #sortable li {
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    margin: 5px;
    padding: 5px;
    cursor: move;
  }
  .handle {
    cursor: pointer;
  }
</style>
</head>
<body>
<ul id="sortable">
  <li><span class="handle">☰</span>Item 1</li>
  <li><span class="handle">☰</span>Item 2</li>
  <li><span class="handle">☰</span>Item 3</li>
  <li><span class="handle">☰</span>Item 4</li>
</ul>

<script>
   $(function() {$ ("#sortable").sortable({
      handle: ".handle"
    });
  });
</script>
</body>
</html>

在上面的示例中，我们创建了一个可以拖动排序的列表，并每个列表项前都添加了一个 handle 元素，用来拖动排序。在初始化 Sortable 时，我们将 handle 设为.handle，表示只有.handle元素才能触发排序。

进一步定制 handle 样式

除了简单地将 handle 设为一个选择器之外，我们还可以进一步定制 handle 的样式。例如，我们可以利用 Font Awesome 中的图标作为 handle，让界面看起来更加美观。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sortable Handle Example with Font Awesome</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.15.3/css/all.css">
<style>
  #sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
  }
  #sortable li {
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    margin: 5px;
    padding: 5px;
    cursor: move;
  }
  .handle {
    cursor: pointer;
  }
</style>
</head>
<body>
<ul id="sortable">
  <li><span class="handle"><i class="fas fa-arrows-alt"></i></span>Item 1</li>
  <li><span class="handle"><i class="fas fa-arrows-alt"></i></span>Item 2</li>
  <li><span class="handle"><i class="fas fa-arrows-alt"></i></span>Item 3</li>
  <li><span class="handle"><i class="fas fa-arrows-alt"></i></span>Item 4</li>
</ul>

<script>
   $(function() {$ ("#sortable").sortable({
      handle: ".handle"
    });
  });
</script>
</body>
</html>

在上面的示例中，我们使用了 Font Awesome 中的fa-arrows-alt图标作为 handle 的内容，并通过fas类来显示图标。这样一来，我们就可以用更好看的图标来代替简单的文本作为 handle。