4

オブジェクトのリストを並べ替えています。そのうちのいくつかは通常のオブジェクトであり、いくつかは他のオブジェクトのコンテナーです。

コンテナに新しいオブジェクトを追加する場合を除いて、ハンドルを使用したソートは正常に機能していますが、リフレッシュ後に認識されません。

私は次のHTMLを持っています:

<button>add another option</button>
<div class="con">
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 1</div>
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 2</div>
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 3</div>
    <div class="subthing">
        <span class="handle">handle</span>
        <div>    <span class="handle">subhandle</span> subitem</div>
        <div>    <span class="handle">subhandle</span> subitem</div>
    </div>
</div>

およびスクリプト:

$('button').click(function() {
    var x = $('<div class="ui-state-highlight"><span class="handle">handle</span> newthing</div>');
    x.appendTo('.con')
    $(".con").sortable('refresh')
});

var container = $(".con");
container.sortable({
    handle: container.children().children(".handle")
});​

フィドル

上記のコードに見られるように、新しいアイテムを追加すると、残りの要素と並べ替えることができません。ハンドル プロパティ.handleが

4

4 に答える 4

8

必要なものは次のとおりです。

container.sortable({
  handle: '> .handle'
});​

これをチェックしてください：http://jsfiddle.net/hQsjD/

直下の .handle 子のみをキャプチャするのは > 記号です。

ハンドル引数は文字列セレクターであり、実際の要素ではないことが重要です。これは、refresh を呼び出してもそれらが更新されないためです。

于 2012-10-03T20:18:41.847 に答える
2

どうぞ。ハンドルを正しく使用していませんでした：

$('button').click(function() {
    var x = $('<div class="ui-state-highlight"><span class="handle">handle</span> newthing</div>');
    x.appendTo('.con');
    $(".con").sortable("refresh");
});

var container = $(".con");
container.sortable({
    handle: ".handle"
});

フィドル

于 2012-10-03T20:14:40.470 に答える
1

私にとっては何もうまくいきませんでしたが、これは次のとおりです。

それ以外の：

$(".selector").sortable('refresh');

私はこれを入れました：

$(".selector").trigger("sortupdate");
于 2016-03-10T11:33:30.370 に答える
-1

これで解決したようです：編集

$('button').click(function() {
    var x = $('<div class="ui-state-highlight"><span class="handle">handle</span> newthing</div>');

    //My Edits
    x.appendTo('.con')
    var container = $(".con");
    container.sortable({
        handle: container.children().children(".handle")
    });
});

    var container = $(".con");
container.sortable({
    handle: container.children().children(".handle")
});
于 2012-10-03T20:13:30.230 に答える