使用 jQuery UI 可排序插件添加项目后刷新列表
Posted
技术标签:
【中文标题】使用 jQuery UI 可排序插件添加项目后刷新列表【英文标题】：Refresh list after adding an item with jQuery UI sortable plugin 【发布时间】：2014-04-28 22:28:20 【问题描述】：好吧，所以我有一个嵌套的可排序列表，因此每个项目既是容器又是可排序元素。
我面临的问题是，每当我添加一个新元素时，我希望 jQuery 用新项目刷新其内部状态。 根据文档，必须调用作为参数“刷新”传递的可排序方法，但我仍然无法使其工作。
示例代码： http://jsfiddle.net/X5sBm/
$(document).ready(function()
var list = $('#mycontainer ul').sortable(
connectWith: '#mycontainer ul',
placeholder: 'myplaceholder'
);
function addElement(text)
$('#mycontainer > ul').append('<li>' + text + '<ul></ul></li>');
list.sortable('refresh');
addElement('yolo');
);
html：
<div id="mycontainer">
<ul>
<li>
Some text
<ul>
</ul>
</li>
<li>
Some text 2
<ul>
</ul>
</li>
</ul>
</div>
CSS：
#mycontainer > ul
display: block;
#mycontainer > ul ul
min-height: 10px;
padding-left: 20px;
.myplaceholder
background-color: yellow;
尝试将一个已经存在的项目拖到新添加的项目下，即使刷新后也无法这样做。
【问题讨论】：
【参考方案1】：我找到了一个便宜的解决方法：
我在同一个标签上再次调用 sortable，像这样重新初始化 Sortable 插件：
$('#mycontainer ul').sortable(
connectWith: '#mycontainer ul',
placeholder: 'myplaceholder'
);
它有效。
【讨论】：
这对我有帮助，我没有意识到我在做什么：我正在添加一个全新的 container 元素，而不是添加到父可排序容器中。这个新元素从未设置过，我的控制台实际上通知了我！从我的臀部拉我的头后，我意识到了这一点。因此，我为可排序选项创建了一个更高范围的对象，然后我可以在我的 AJAX 调用之后重用这些选项。我希望这对其他人有帮助！ 这真的有效吗？我遇到了同样的问题，似乎refresh 除了返回错误之外什么也没做（顺便说一句，它是不可修复的，它似乎不适用于嵌套元素）。最终再次复制粘贴整个 sortable() 函数似乎有点不切实际，因为我的代码比上面示例中的这 4 条代码规则要大。谁有更好的答案？【参考方案2】：
关键的理解和要点是使用可排序选项初始化动态创建的<ul></ul>。我建议创建一个options 对象以便于重复使用。
$(document).ready(function()
const container = $('#mycontainer ul');
const options =
connectWith: '#mycontainer ul',
placeholder: 'myplaceholder'
;
container.sortable(options);
function addElement(text)
let newListItem = $('<li>').text(text);
newListItem.append($('<ul>').sortable(options)); // <- key concept
$('#mycontainer > ul').append(newListItem);
//container.sortable('refresh');
addElement('yolo');
);#mycontainer > ul
display: block;
#mycontainer ul ul
min-height: 10px;
padding-left: 20px;
.myplaceholder
background-color: yellow;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="mycontainer">
<ul>
<li>
Some text
<ul>
</ul>
</li>
<li>
Some text 2
<ul>
</ul>
</li>
<li>
Some text 3
<ul>
</ul>
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</body>
</html>【讨论】：
以上是关于使用 jQuery UI 可排序插件添加项目后刷新列表的主要内容，如果未能解决你的问题，请参考以下文章
没有 jQuery UI（或根本没有 jQuery？）的可排序/可拖动列表项