我的情况很特殊。我有两个清单。 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)
当重新排列的数据保存到DB时。
我想避免刷新和重新从数据库中提取数据。所以我想同步两个列表中元素的位置。
因此,每当用户拖动列表 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>
有什么想法吗?