我的情况很特殊。我有两个 list 。 1 列表包含所有项目,2 包含顶部列表。显然,项目重叠,第二个列表中的项目根据它们克隆自列表 1 中的哪个元素,标记为类clone-23clone-25。
Example:
List 1
1 run
2 eat
3 drink
4 play
List 2 (TOP)
1 run (class clone)
2 eat (class clone)
当重新排列的数据保存到数据库时。
我想避免刷新和重新从数据库中提取数据。所以我想同步两个列表中元素的位置。 因此,每当用户拖动列表 1 中的项目时,列表 2 就会自动显示更改的位置,反之亦然。
我启动我的排序:
// Initiate jquery ui sortable
$(".word-list").sortable({
tolerance: 'pointer',
cursor: 'move',
forcePlaceholderSize: true,
dropOnEmpty: true,
connectWith: 'ol.word-list',
//containment: "body",
//
start: function(event, ui) {
// Starting position of the word element
//ui.item.startPos = ui.item.index();
//console.dir(ui.item.startPos);
},
//
stop: function(event, ui) {
//
},
update: function(event, ui) {
//
save_word_order(this);
//
},
out: function(event, ui) {
//
},
over: function(event, ui) {
//
},
placeholder: "ui-state-highlight"
});
克隆元素 html:
<li data-con-id="94" data-order-id="1" data-note="" class="ui-state-default clone-94"</li>
列表很简单:
<ol id="tabs-1" class="word-list"></ol>
<ol id="tabs-2" class="word-list"></ol>
有什么想法吗?
最佳答案
请参阅此 fiddle 以获取同步两个列表共有的项目顺序的代码:
http://jsfiddle.net/Fresh/22jc2/
请注意,在我的示例中,我通过不包含克隆属性来简化列表二的 li 元素;相反,我通过列表项的 insideText 值来比较两个列表中的项目。如果您确实需要使用克隆项属性,那么您应该很容易重构我的解决方案以使用它们。
我用来实现公共(public)列表项顺序同步的脚本是:
var reorderLists = function (list1, list2) {
$('#' + list1 + ' li').each(function (index) {
var sortableItemWithText = $('#' + list2 + ' li:contains(' + this.textContent + ')');
if (sortableItemWithText.length === 1) {
sortableItemWithText.appendTo('#' + list2);
return;
}
});
};
$("#sortable1, #sortable2").sortable({
update: function (event, ui) {
var parentNodeId = ui.item[0].parentNode.id;
if (parentNodeId == "sortable1") {
reorderLists("sortable1", "sortable2");
}
if (parentNodeId == "sortable2") {
reorderLists("sortable2", "sortable1");
}
}
});
$("#tabs").tabs();
请注意,如果您更改列表 1 或列表 2 中的项目位置,则公共(public)列表项目的顺序同步会起作用。
另请注意,通过注释掉:
$("#tabs").tabs();
当您移动列表项时,您将能够看到列表自动更新;这可以更轻松地确认重新订购例程是否按预期工作。
关于javascript - 如何同步包含克隆元素的 jquery 可排序列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20268331/