jQuery UI 可排序 appendTo 选项

简介

jQuery UI 是一个功能强大的 JavaScript 库，提供了一套交互式的用户界面组件，其中包括可排序（Sortable）功能。可排序功能允许用户通过拖动和放置来重新排列列表项。jQuery UI 提供了一些选项来自定义可排序功能的行为，其中之一是 appendTo 选项。

appendTo 选项

可排序的列表项默认情况下会被添加到其父级容器中，但是通过设置 appendTo 选项，你可以指定列表项应该被添加到的容器。该选项接受选择器字符串、DOM 元素、jQuery 对象或函数作为参数。

使用选择器字符串

$( "#sortable" ).sortable({
  appendTo: "#container"
});

上述代码将会把可排序的列表项添加到具有 id 为 "container" 的元素中。

使用 DOM 元素

var container = document.getElementById("container");
$( "#sortable" ).sortable({
  appendTo: container
});

上述代码将会把可排序的列表项添加到具有 id 为 "container" 的元素中。

使用 jQuery 对象

var container = $( "#container" );
$( "#sortable" ).sortable({
  appendTo: container
});

上述代码将会把可排序的列表项添加到具有 id 为 "container" 的元素中。

使用函数

$( "#sortable" ).sortable({
  appendTo: function(event, ui) {
    return $(ui.item).closest("#container");
  }
});

上述代码使用了函数来动态确定要添加列表项的容器。在此示例中，使用 closest 方法找到最近的具有 id 为 "container" 的祖先元素，并将列表项添加到该容器中。

结论

使用 appendTo 选项，你可以轻松地指定可排序列表项应该添加到的容器。无论是使用选择器字符串、DOM 元素、jQuery 对象还是函数，都可以灵活地定制可排序列表的行为，为用户提供更好的交互体验。

参考链接：jQuery UI Sortable