2

私は最近アップグレードを余儀なくされました：

  • jQuery 1.7.1 から 1.8.3 へ
  • jQueryUI 1.8.9 から 1.9.2 へ

(Blueimp の jQuery File Upload の最新バージョンと互換性を持たせるために、アップグレードを余儀なくされました。)

(1.7.1 / 1.8.9) で完全に機能する次のコードがあります。

$( "div.archive li" )
  .draggable({ // make the archive-icons draggable and connect to the album(s)
    connectToSortable:  handleSortable, // ,"#album_45 ul", //
    helper: "clone", // (helper must be set to 'clone' in order to work flawlessly),
    revert: "invalid",
    appendTo: "body"})

と

sortableUL.sortable({
    helper: 'clone',
    appendTo: "body",
    update : function () {
        var serializedSequence = sortableUL.sortable('serialize'); // Fails in jQueryui/1.8.21 !!
        $.ajax({
            url: "/callback/upAlbum",
            type: "post",
            data: serializedSequence,
            success: function(htmlData){
                sortableUL.html(htmlData);
                recursiveSortable(albumID, joPanel); // once the newly ordered zone-album has been read, recurse back to: make list sortable & slidable
            }
        }); // END $.ajax
    } // END update : function ()
});

上記のコードは、古い jQuery および jQueryUI では問題なく動作しますが、新しいバージョンでは失敗します。古いバージョンにダウングレードすると、コードは再び機能します (ただし、jQuery FileUploader は機能しません!)。

新しいセットアップでは、エラー メッセージは生成されません。ただし、次のシナリオが実行されます。

ドラッグ可能なリスト項目は<li id="icon_1234">. これらが にドロップされると.sortable()、受け入れられます。したがって、それらは になり<li>ます.sortable() <ul>。ただし、その時点でid="icon_1234"は削除されます。のその他の属性<li>はそのまま残されます。

更新:実際には、が に追加されるid="icon_1234"と が削除されるため、明らかに問題の原因ではありません。ただし、オプションをコメントアウトしても問題は変わりません。<li><body>.droppable()appendTo:

もちろん、 がなければid="icon_1234"、新しくドロップされた<li>ものは以下のステートメントに耐えられません:

var serializedSequence = sortableUL.sortable('serialize');

そのため、更新コールバックの後、新しくドロップさ<li>れたものがリストから消え.sortable()ます。

私は本当にこの問題を解決する方法についての予感がありません...

4

2 に答える 2

2

さて、私が見つけたものと、途中で耐えたスリングと矢を共有しましょう.

jQuery UI の神々は、 aにドロップされたときに aから aを削除することを機能と見なしていることを理解しています。これは 1.8.9 と 1.9.2 の間のどこかに導入されたようです。iddraggablesortable

その理由は、ID の重複を望まないからです。その場合、.sortable('serialize')メソッドは を探すのではid=""なく、 の他の属性を探す必要があります<li>。(ただし、serialize メソッドはデフォルトで引き続き を探しidます。)

だから、ここに私の回避策があります。リスト項目は以前は次のように表示されていました。

<li id="foo_123">

これらに属性を追加する必要があります<li>:

<li id="foo_123" bar="foo_123">

次に、id ではなく、新しい属性を探すように serialize メソッドに指示します。

var serializedSequence = $('#sortableUL').sortable('serialize',{
  key: 'foo',
  attribute: 'bar'
});

これでうまくいくはずです。ただし、私の場合は、もう 1 つスリング/矢がありました。このserializeメソッドは、正しくシリアル化された配列を生成しませんでした。(理由はわかりませんが、この機能にこれ以上時間を割く余裕はありません。) したがって、以下を追加する必要がありました。

serializedSequence = serializedSequence.replace(/=/g,"[]=");

更新:これは、他の誰かが同様のソリューションのために作成したフィドルです。

お役に立てれば ...

于 2012-12-12T08:09:43.257 に答える
0

上記の Ivo Renkema による回答を補足すると、キーに配列プッシュを使用できます。

var serializedSequence = $('#sortableUL').sortable('serialize',{
  key: 'foo[]',
  attribute: 'bar'
});

これにより、配列 foo[]=1&foo[]=2... が生成されます。

ここでフィドルを更新しました

于 2014-12-16T18:39:15.883 に答える