1

注意：更新的问题

下面是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 时，需要在调用 update 事件之前用新的 id 和位置更新新附加的 LI。

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

例如，用户在两个 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事件中做到这一点吗？请帮助我

4

1 回答 1

0

我正在使用以下方式重新生成我的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();   
});
于 2012-05-11T10:17:57.173 回答