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();   
});

如何在可排序的两个UL之间重新排列li id？

1 个答案: