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: Converting circular structure to 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"}]

如有任何意见，我们将不胜感激！谢谢！

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>

jQuery UI 可排序序列化

The jQuery UI sortable serialization

jquery

serialization

jquery-ui-sortable