jQuery UI：sortable（ 'toArray'）は空の配列を返します

Question

これは私を困惑させます。次のコードは ",,,,,,"を返します。

<script type="text/javascript"> 
$(function() { 
    $('#listB').sortable({ 
     connectWith: '#listA', 
     update: function(event, ui) { 
      var result = $(this).sortable('toArray'); 
      alert(result); 
      } 
    }); 
    $('#listA').sortable({ 
     connectWith: '#listB' 
    }); 
}); 
</script> 

<div id="boxA"> 
    <ul id="listA" class="myList"> 
     <li value="1">Item A</li> 
     <li value="2">Item B</li> 
     <li value="3">Item C</li> 
     <li value="4">Item D</li> 
     <li value="5">Item E</li> 
     <li value="6">Item F</li> 
     <li value="7">Item G</li> 
    </ul> 
</div> 

<div id="boxB"> 
    <ul id="listB" class="myList"> 
     <li value="1">Item A</li> 
     <li value="2">Item B</li> 
     <li value="3">Item C</li> 
     <li value="4">Item D</li> 
     <li value="5">Item E</li> 
     <li value="6">Item F</li> 
     <li value="7">Item G</li> 
    </ul> 
</div> 

なぜですか？それは私を狂ってしまう！助言がありますか？

Answer 1

.sortable('toArray')は、項目Idsを配列にシリアル化し、アイテムにはIDがないため、空の文字列があります。

Answer 2

私はこの問題を抱えていたとしても私は私の要素にidを持っていた以外、jQueryのソート可能な（「のtoArray」）は非常に戻る際にIDをミスヒットして、しかし、あなたは、この使用してJavaScriptでそれらをつかむことができます。

を

function getSortOrder() { 
    var children = document.getElementById('sortedElement').childNodes; 
    var sort = ""; 
    for (x in children) { 
     sort = sort + children[x].id + ","; 
    } 
    return sort; 
} 

もちろん、コンマで区切られた文字列でIDを返しますが、配列を返すことができます。 この問題を解決するにはより良い方法があると確信しています。これは私が見つけた解決策です。

Answer 3

あなたはこのようにフェッチする属性を定義することができます

var result = $(this).sortable('toArray', {attribute: 'value'}); 

Answer 4

シリアル化は、空の文字列を返す場合、id属性は、アンダースコアが含まれることを確認してください。たとえば、id属性が "foo_1"、 "foo_5"、 "foo_2"の3要素リストは、 "foo [] = 1 & foo [] = 5 & foo []にシリアル化されます。 = 2 "となる。アンダースコア、等号、またはハイフンを使用して、セットと番号を区切ることができます。たとえば、 "foo = 1"、 "foo-1"、および "foo_1"はすべて "foo [] = 1"にシリアル化されます。

jq sortable reference

Answer 5

$（ 'ソート可能。 '）ソート可能な（' のtoArray'）。は、クラスの最初の要素のみをソート可能なとして解析します。

$('.sortable').each(function(){ 
    result.push($(this).sortable('toArray')); 
}) 

Answer 6

をあなたがこれを行うことができます別の属性を使用するには：それは今から属性「値」を使用していますので、これはそれを作るだろう

$('#element').sortable('toArray' {attribute: 'value'}) 

をあなたは各を使用して、すべての要素を解析することができますあなたのコード。

Documentation on Sortable toArray method

Answer 7

私はいくつかの純粋なJavaScriptの答えをご覧ください。彼らは動作しますが注意してください、彼らは画面上に表示される順序で項目を返すことはできません。下記のコードを使用すると、上記のjtsalvaを参照して、適切なソート順で項目を返します。私は新しい注文をデータベースに保存したいので、私はしばらく困惑していたので、誰かが中止したところでグリッドをリロードすることができました。

var result = $(this).sortable('toArray', {attribute: 'value'});