jQuery UI 可排序的 connectWith 选项

简介

jQuery UI 是一个基于 jQuery 的 JavaScript UI 库，它提供了丰富而灵活的 UI 组件和交互能力，其中包括可排序的 connectWith 选项。

connectWith 选项允许您将不同的可排序元素列表连接起来，使得它们之间可以互相拖放和排序。connectWith 选项非常适用于需要对多个列表进行排序和交互的场景，例如博客文章分类、图片集合等。

使用方法

使用 connectWith 选项需要首先加载 jQuery UI 库和相关依赖文件。在实现可排序的元素列表时，需要在每个列表中指定相同的 connectWith 选项值。

下面是一个简单的实现例子：

HTML

<ul id="list1" class="sortable-list">
  <li>列表1 - 1</li>
  <li>列表1 - 2</li>
  <li>列表1 - 3</li>
</ul>
<ul id="list2" class="sortable-list">
  <li>列表2 - 1</li>
  <li>列表2 - 2</li>
  <li>列表2 - 3</li>
</ul>

JavaScript

$(".sortable-list").sortable({
  connectWith: ".sortable-list"
}).disableSelection();

参数说明

connectWith 选项的值可以是一个 CSS 选择器字符串，它表示将要连接和排序的元素列表所在的容器元素。在同一个容器内的元素默认可以互相拖放和排序，且不需要指定 connectWith 属性。

如果需要同步多个不同的容器之间的排序效果，可以在每个容器元素中指定相同的 connectWith 选项值即可。

总结

可排序的 connectWith 选项是 jQuery UI 库中的一个非常便捷的功能，它允许用户将多个列表连接在一起，实现列表元素的快速排序和交互功能。在编写博客分类、图片管理等界面时，connectWith 选项可以提高效率，减少用户的操作成本，值得开发人员使用。