Question

如何.sortable（“序列化”）只＃sortable1？

每次＃sortable1更新我都会收到错误：

错误：在初始化之前无法调用sortable上的方法;试图调用方法'serialize'

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>

Answer 1

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

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>

Answer 2

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

像这样：

LESS="-Ri"

jQuery UI Sortable - 错误：在初始化之前无法调用sortable上的方法;试图调用方法'serialize'

2 个答案: