jQuery UI 可拖动的 connectToSortable 选项

介绍

jQuery UI 是 jQuery 的一个扩展，提供了一些常用的 UI 组件、交互和特效等功能。

其中 connectToSortable 是一个可拖动的选项，可以连接到一个可排序列表上，并实现拖拽效果。这个功能在用户交互场景中非常有用。

使用方法

步骤一：HTML 结构

在 HTML 中使用列表（Sortable）和容器（Draggable），并为它们添加 ID 和 CLASS：

<ul id="sortable" class="ui-sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
</ul>

<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

步骤二：JavaScript 代码

在 JavaScript 文件中使用 connectToSortable 属性，将容器连接到列表上：

$(function() {
   $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
   });
   $( "#sortable" ).sortable({
      revert: true
   });
   $( "ul, li" ).disableSelection();
});

其中，connectToSortable 属性绑定了容器和列表，helper 属性指定了拖拽时的外观，revert 属性表示拖拽结束后组件是否回到原来的位置。

disableSelection 方法用于防止选中文本。

浏览器兼容性

connectToSortable 属性兼容 IE 7/8/9/10、Firefox、Chrome 以及 Safari 等浏览器。但是，拖拽效果在 IE 中可能会有一些问题。

总结

jQuery UI 可拖动的 connectToSortable 选项非常有用，可以在用户交互中产生非常好的效果。该选项可以轻松地实现拖拽、排序等功能，是实现复杂交互的一个重要利器。