Die jQuery UI sortierbare Serialisierung

Question

Ich weiß, dass diese Frage mehrmals gestellt wurde, aber ich denke, dass ich einen Punkt oder etwas vermisse. Ich versuche, die Serialisierung von jQuery sortierbar zu nutzen, aber es sieht so aus, als ob es nicht funktioniert.

Hier ist meine Basisliste:

var group = $("ol.simple_with_drop").sortable({ 
group: 'simple_with_drop', 
onDragStart: function ($item, container, _super) { 
    if(!container.options.drop){ 
      $item.clone().insertAfter($item); 
     } 
     _super($item, container); 
}, 
onDrop: function ($item, container, _super) { 
     var data = group.sortable('serialize').get(); 
     var jsonString = JSON.stringify(data); 
     $('#serialize_output').text(jsonString); 
     _super($item, container); 
     }, }); 
$("ol.simple_with_no_drop").sortable({ 
    group: 'simple_with_drop', 
    drop: false 
}); 

Und die Serialisierung Ergebnis:

[[{},{},{}]] 

Die Idee, das Auto Serialisierung war zu nutzen, mit

<ol class='simple_with_no_drop vertical'> 
      <li id='script_1' class='highlight'>Hello ES</li> 

      <li id='script_2' class='highlight'>Login ES</li> 

      <li id='script_3' class='highlight'>Test ES</li> 

      <li id='script_4' class='highlight'>Another ES</li> 
     </ol> 
     </div> 

     <div class='span4'> 
     <h3>Scenario scripts</h3> 

     <ol class='simple_with_drop vertical'> 
      <li id='script_1'>Hello ES</li> 

      <li id='script_2'>Login ES</li> 
     </ol> 
     </div><button>Save Scenario</button> 
     <pre id='serialize_output'> </pre> 

Hier werden die js ist item_id form, aber es sieht lite aus, es wird nicht erkannt. Wenn ich versuche, wie in vielen Ressourcen ohne .get(), habe ich einen Fehler "Uncaught TypeError: Konvertierende zirkuläre Struktur in JSON" beim Ablegen.

Ich habe versucht, die Serialisierung mit $ (this) bekam aber dieses Ergebnis stattdessen zu verwenden:

[{"containerPath":"","containerSelector":"ol, ul","distance":0,"delay":0,"handle":"","itemPath":"","itemSelector":"li","bodyClass":"dragging","draggedClass":"dragged","placeholderClass":"placeholder","placeholder":"<li class=\"placeholder\"></li>","pullPlaceholder":true,"tolerance":0,"drag":true,"drop":true,"exclude":"","nested":true,"vertical":true,"group":"simple_with_drop"}] 

Jede Eingabe würde geschätzt! Vielen Dank!

Answer 1

Ihr JS-Code ist in Ordnung. In Ihrem HTML-Code fügen Sie einfach Daten-ID-Attribut mit jedem der li, und es wird funktionieren!

<ol class='simple_with_no_drop vertical'> 
     <li id='script_1' data-id='script_1' class='highlight'>Hello ES</li> 

     <li id='script_2' data-id='script_2' class='highlight'>Login ES</li> 

     <li id='script_3' data-id='script_3' class='highlight'>Test ES</li> 

     <li id='script_4' data-id='script_4' class='highlight'>Another ES</li> 
    </ol> 
    </div> 

    <div class='span4'> 
    <h3>Scenario scripts</h3> 

    <ol class='simple_with_drop vertical'> 
     <li id='script_1' data-id='script_1'>Hello ES</li> 

     <li id='script_2' data-id='script_2'>Login ES</li> 
    </ol> 
    </div><button>Save Scenario</button> 
    <pre id='serialize_output'> </pre>