Howto serialisiert werden mehrere Listen mit JQuery

Question

Ich habe 3 sortierbar UL und eine einfache Jquery/javascript

<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 sind die ziehbar zwischen UL Wie kann ich serialisiert dies so bekomme ich zum Beispiel menu1 [ 0] = 1 & menu1 [1] = 3 Oder und Array oder was auch immer ich arbeiten kann, um den Staat zu retten?

Answer 1

AKTUALISIERT

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

In Ihrem Fall verwenden diese:

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

// diese Funktion Ihre UL LI machen eine serialisierte Objekt

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

, dass Sie so etwas wie dieses geben:

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

, die die Position, um jedes Element

Answer 2

habe es funktioniert thx zu einem anderen Thread repräsentiert: 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(); 
});