jQuery UI 可排序序列化答案

【问题标题】：The jQuery UI sortable serializationjQuery UI 可排序序列化
【发布时间】：2017-02-20 01:41:00
【问题描述】：

我知道这个问题已经被问过很多次了，但我认为我错过了一点或什么。我正在尝试利用 jQuery sortable 的序列化，但它看起来不起作用。

这是我的基本清单：

    <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()，则在删除时会出现“未捕获的类型错误：将循环结构转换为 JSON”错误。

我尝试使用带有 $(this) 的序列化，但得到了这个结果：

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

任何意见将不胜感激！谢谢！

【问题讨论】：

标签： jquery serialization jquery-ui-sortable

【解决方案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>

【讨论】：

工作就像一个魅力。谢谢！