HOWTO序列多个列表使用jQuery

我有3个排序UL的和简单的jQuery/JavaScript的HOWTO序列多个列表使用jQuery

<ul class="sortable" id="menu1"> 
    <li id="id_1">whatever</li> 
    <li id="id_2">you</li> 
</ul> 
<ul class="sortable" id="menu2"> 
    <li id="id_3">wanne</li> 
    <li id="id_4">put</li> 
</ul> 
<ul class="sortable" id="menu3"> 
    <li id="id_5">in</li> 
    <li id="id_6">here</li> 
</ul>

$(function() { 
    $("ul.sortable").sortable({ 
     connectWith: 'ul' 
     }); 
    }); 
</script>

LI的是UL的之间拖动我如何可以序列化这个，所以我得到例如菜单1 [ 0] = 1 & menu1 [1] = 3 或数组或任何我可以用来保存状态？

来源

2010-05-29 Martijn

修订

DEMO：http://jsbin.com/evoru4/2

在你的情况下使用：

$(function() { 
    $("ul.sortable").sortable({ 
     connectWith: '.sortable', 
     update: function(event, ui) { 
     var position = $('.sortable').serial(); 
     alert(position); 
     } 
    }); 
});

//此功能让您的UL李序列化对象

(function($) { 
    $.fn.serial = function() { 
     var array = []; 
     var $elem = $(this); 
     $elem.each(function(i) { 
      var menu = this.id; 
      $('li', this).each(function(e) { 
       array.push(menu + '[' + e + ']=' + this.id); 
      }); 
     }); 
     return array.join('&'); 
    } 
})(jQuery);

，给你这样的事情：

menu1[0]=id_1&menu1[1]=id_2&menu2[0]=id_4&menu2[1]=id_6&menu3[0]=id_5&menu3[1]=id_3

是代表每个元素的位置顺序

来源

2010-05-29 23:58:45

国际直拨电话，那么远我是的，但问题是我需要知道它们在哪个菜单中，所以1阶是不够的。 – Martijn 2010-05-30 11:06:34

看到更新！ – 2010-05-30 14:16:43

Thx很多的帮助！ – Martijn 2010-05-30 18:35:32

得到它的工作THX到另一个线程： link text

$(function() { 
$(".sortable").sortable(
{ 
    connectWith: 'ul', 
    stop : function() 
    { 
     $.ajax(
     { 
      type: "POST", 
      url: "update.php", 
      data: 
      { 
       sort1:$("#menu1").sortable('serialize'), 
     sort2:$("#menu2").sortable('serialize'), 
       sort3:$("#menu3").sortable('serialize') 
      }, 
      success: function(html) 
      { 

       alert(html); 

      } 
     }); 
    } 
}).disableSelection(); 
});

来源

2010-05-30 13:09:57 Martijn

HOWTO序列多个列表使用jQuery

回答

相关问题