javascript - 如何在可排序的两个 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传递所有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();   
});