如何在sortable中重新排列两个UL之间的li-id

Question

注意：更新的问题

下面是HTML，

<ul id="sortable1" class="connectedSortable">
<li id="listItem_1">test1</li>
<li id="listItem_2">test2</li>
<li id="listItem_3">test3</li>
</ul>

第二个UL类似

<ul id="sortable2" class="connectedSortable">
<li id="secondlistItem_1">second test1</li>
<li id="secondlistItem_2">second test2</li>
<li id="secondlistItem_3">second test3</li>
</ul>

jquery可排序代码类似于

jQuery(function() {
jQuery( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
update : function () { 
jQuery.post(BASE_URL+"tabs/index", jQuery('#sortable1').sortable('serialize'),
function(data) {
//alert(data);         
});                           
}
}).disableSelection();   
});

我在更新事件上调用ajax函数，并使用serialize.so传递所有li位置，这样我就可以很容易地更新li位置。但当我们从第二个UL li放置到第一个UL li时，需要在调用更新事件之前用新的id和位置更新新附加的li。

一旦用户更改了li，我如何从sortable2或其自身重新排列带有新附加li的li id？

例如，用户在两个类似UL的之间进行一些更改

<ul id="sortable1" class="connectedSortable">
<li id="secondlistItem_1">second test1</li>
<li id="listItem_1">test1</li>
<li id="listItem_3">test3</li>
</ul>

上面的UL应该像一样重新排列li-id

<ul id="sortable1" class="connectedSortable">
<li id="listItem_1">second test1</li>
<li id="listItem_2">test1</li>
<li id="listItem_3">test3</li>
</ul>

在receive事件中可以这样做吗？请帮我处理这个

Answer 1

我正在使用以下方式重新生成我的ul-li-id，

jQuery(function() { 
jQuery( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
receive : function(event, ui){
jQuery('#sortable1 li').each(function(index) {
jQuery(this).attr('id','listItem_'+parseInt(index+1));
console.log(index + ': ' + jQuery(this).attr('id'));
});        
jQuery('#sortable2 li').each(function(index) {
jQuery(this).attr('id','secondlistItem_'+parseInt(index+1));
console.log(index + ': ' + jQuery(this).attr('id'));
})            
},
update : function () {
var order1 = jQuery('#sortable1').sortable('serialize'); 
jQuery.post(BASE_URL+"appbuilder/tabs/index", jQuery('#sortable1').sortable('serialize'),
function(data) {
console.log(data);
});       
jQuery.post(BASE_URL+"appbuilder/tabs/index", jQuery('#sortable2').sortable('serialize'),
function(data) {
console.log(data);
});                    
}
}).disableSelection();   
});