jQuery UI Sortable - 错误：无法在初始化之前调用可排序的方法；试图调用方法“序列化”答案

【问题标题】：jQuery UI Sortable - Error: cannot call methods on sortable prior to initialization; attempted to call method 'serialize'jQuery UI Sortable - 错误：无法在初始化之前调用可排序的方法；试图调用方法“序列化”
【发布时间】：2015-05-02 14:54:10
【问题描述】：

如何仅 .sortable("serialize") #sortable1？

每次在 #sortable1 更新时都会出错：

错误：无法在初始化之前调用可排序的方法；试图调用方法“序列化”

jQuery 代码

$( "#sortable1, #sortable2" ).sortable({
  connectWith: ".connectedSortable",
  update: function(event, ui){
    var sorted = $("#sortable1").sortable( "serialize" );
    console.log( sorted );
  }
}).disableSelection();

HTML 代码

        <div class="row">
            <div class="col-sm-6">
                    <div id="sortable1" class="connectedSortable">
                      <div class="ui-state-default" id="item_1">Item 1</div>
                      <div class="ui-state-default" id="item_2">Item 2</div>
                      <div class="ui-state-default" id="item_3">Item 3</div>
                      <div class="ui-state-default" id="item_4">Item 4</div>
                      <div class="ui-state-default" id="item_5">Item 5</div>
            </div>

            <div class="col-sm-6">
                <div id="sortable2" class="connectedSortable">
                  <div class="ui-state-highlight" id="item_11">Item 1</div>
                  <div class="ui-state-highlight" id="item_22">Item 2</div>
                  <div class="ui-state-highlight" id="item_33">Item 3</div>
                  <div class="ui-state-highlight" id="item_44">Item 4</div>
                  <div class="ui-state-highlight" id="item_55">Item 5</div>
                </div>
            </div>
        </div>

【问题讨论】：

每次在#sortable1 update 上出现错误是什么意思？还有你上面包含的javascript，你从哪里调用它，$(document).ready()？
是的，我从 $(document).ready() 调用它，每次我尝试对其进行排序时都会返回此错误 - 错误：在初始化之前无法调用可排序的方法；试图调用方法“序列化”

标签： jquery html serialization jquery-ui-sortable

【解决方案1】：

一种解决方案是将可排序的持有者定义为一个变量，并在可排序函数中使用该变量。

像这样：

var sortable_list = $('#sortable1');

sortable_list.sortable({
  ...
  update: function(event, ui){
    var order = sortable_list.sortable('serialize');
    console.log(order);
  }
});

【讨论】：

【解决方案2】：

我为自己找到了一条出路，一切都按我的需要运行，但是脚本太长了，所以如果你知道如何优化它，我将非常感激

jQuery 代码

<script>
  $(function() {
    $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",
        tolerance: 'pointer'
    });
    $( "#sortable1" ).sortable({
      connectWith: ".connectedSortable",
      update: function(event, ui){
        var oi = [];
        var sorted = $( '#sortable1 > div' ).each( function( index, el ) {
            oi.push( { id: index , value: $( this ).data('order') } );
        });
        console.log( oi );
      }
    }).disableSelection();
  });
</script>

HTML 代码

<div id="sortable1" class="connectedSortable">
  <div class="ui-state-default" data-order="item_1">Item 1</div>
  <div class="ui-state-default" data-order="item_2">Item 2</div>
  <div class="ui-state-default" data-order="item_3">Item 3</div>
  <div class="ui-state-default" data-order="item_4">Item 4</div>
  <div class="ui-state-default" data-order="item_5">Item 5</div>
</div>

<div id="sortable2" class="connectedSortable">
  <div class="ui-state-highlight" data-order="item_11">Item 1</div>
  <div class="ui-state-highlight" data-order="item_22">Item 2</div>
  <div class="ui-state-highlight" data-order="item_33">Item 3</div>
  <div class="ui-state-highlight" data-order="item_44">Item 4</div>
  <div class="ui-state-highlight" data-order="item_55">Item 5</div>
</div>

【讨论】：