jQuery UIのソート可能なシリアル化

Question

この質問は何度も尋ねられていますが、私は何か不足していると思います。 jQueryソート可能なシリアル化を活用しようとしていますが、動作していないようです。ここで

は私のベースのリストである：ここで

<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> 

はJSです：

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

そして、シリアライズ結果：

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

アイデアがで自動シリアライズを活用しましたitem_id形式ですが、認識されていないようです。 多くのリソースのように、.get（）がなくても、私は「Uncaught TypeError：JSONへの循環構造の変換」というエラーが発生しました。

私は$（この）でシリアライズを使用しようとしましたが、代わりにこのような結果を得た：

[{"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"}] 

任意の入力をいただければ幸いです！ありがとう！

Answer 1

あなたのJSコードは問題ありません。あなたのHTMLコードでは、それぞれのliにdata-id属性を追加するだけで動作します！

<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>