0

次の構造の 2 レベルの深いソート可能 (jQuery) リストがあります。ul 要素と li 要素の両方が並べ替え可能です。

<div id="container">    
    <ul id="x_one">
        <li class="y_one"></li>
        <li class="y_two"></li>
        <li class="y_three"></li>
    </ul>
    <ul id="x_two">
        <li class="y_four"></li>
        <li class="y_five"></li>
        <li class="y_six"></li>
    </ul>
</div>

次のように、追加の ul 要素を動的に挿入 (プリペンド) すると、次のようになります。

<div id="container">    
    <ul id="x_three">

    </ul>
    <ul id="x_one">
        <li class="y_one"></li>
        <li class="y_two"></li>
        <li class="y_three"></li>
    </ul>
    <ul id="x_two">
        <li class="y_four"></li>
        <li class="y_five"></li>
        <li class="y_six"></li>
    </ul>
</div>

ページを更新する前に、li 要素を ul#x_three にドラッグできません。

このような挿入された要素は、jQuery の Sortable によってどのように認識されますか?

jQuery コード:

$('#container').sortable({    
  update: function() {
   $.post($(this).data('update-url'), $(this).sortable('serialize'));
  }
});

http://jsfiddle.net/mvhB4/2/

4

1 に答える 1

1

(ソート可能内でドラッグ アンド ドロップするのではなく) 自分でソート可能にアイテムを追加する場合、動作に必要なイベント コードが添付されていません。これを修正するには、コンテナを次のように呼び出し'refresh'ます。

$('#container').sortable('refresh');

Sortable Widget の更新に関する jQuery UI ドキュメントには、次のように書かれています。

リフレッシュ()

並べ替え可能なアイテムを更新します。並べ替え可能なすべてのアイテムの再読み込みをトリガーし、新しいアイテムが認識されるようにします。

このメソッドは引数を受け入れません。

アップデート

あなたが行っていた 2 レベルの並べ替えの前に見逃して申し訳ありません (私は実際に以前に並べ替え可能なものを使用したことがないと告白します)。フィドルは非常に役に立ちました。Javascript の質問ごとにフィドルを作成することをお勧めします。

問題は<ul>、 #container 内の要素だけでなく、その下<div>の要素も並べ替え可能にするため<li>、 を使用connectWithしてそれらをクロスリスト移動可能にするため、 new を追加するときに<ul>並べ替え可能にする必要があることです。そうではありませんでした（また、connectWithグループの一部でもありません）。したがって、初期化コードをもう一度実行するのと同じくらい簡単です。

$('.list_type').sortable({
     connectWith: '.list_type'
});

これで完了です。動作します (JsFiddle)。

于 2013-04-06T01:40:47.033 に答える