8

ネストされたjQueryソート可能にする方法はありますか? ネストされたコンテナのように、ネストされたリストの意味ではありません。

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="container">
    <div class="item"></div>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="item"></div>
</div>

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

http://jsfiddle.net/ExLqv/2/

この例はほとんど機能しますが、ネストされたコンテナーをドロップするとエラーが発生します。

Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong.

ドラッグするcontainerとマウスの下に配置されるため、ドロップするとそれ自体の中に入れようとするためだと思います。

回避策はありますが、理想的ではないため、問題はまだ残っています。

$('.container').sortable({
    connectWith: '.container:not(.ui-sortable-helper)',
    tolerance: "pointer",
    cursorAt: { left: -50 }
});

http://jsfiddle.net/ExLqv/8/

4

4 に答える 4

9

問題

要素がソート可能なコンテナーであり、ソート可能なコンテナー内のソート可能な要素でもある場合、jQuery はそれを失います。

ソリューション

問題のあるオブジェクトを別の要素内にラップするのと同じくらい簡単です。フィドル: http://jsfiddle.net/ExLqv/12/

「内側」のコンテナは次のようにラップされます。

<div class="container-wrapper">
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

内部コンテナー自体は、ソート可能なコンテナーとソート可能なコンテナー内のソート可能なオブジェクトの両方ではないため、問題を回避できます。代わりに、ソート可能なオブジェクトがラッパーになりました。クラス名のcontainer-wrapperは説明のためのものであることに注意してください。削除できますが、機能は変わりません。

さて、このアプローチがあなたが言及した回避策よりも優れているかどうかはわかりません. なんらかの回避策が必要だとは思いますが。多くの人がこの問題に遭遇しており、ネストされたソータブルは現時点ではサポートされていないという一般的なコンセンサスがあるようです。「jquery sortable nested」をグーグルで検索した場合の結果から判断すると、問題を解決するプラグインがたくさんあるようです:)

于 2014-01-09T15:25:51.267 に答える
0

並べ替え可能なコンテナーおよび並べ替え可能な要素としてネストされた並べ替え可能な要素を作成するには、クローンとプレースホルダーのヘルパーが必要です。並べ替えるとき、位置のプレースホルダーが 0 かどうかを確認してから、プレースホルダーを再追加して、ドラッグ コンテナーがどこに挿入し直して回避するかを認識できるようにします。

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

フィドルのテストは次のとおりです。 http://jsfiddle.net/0umjf5tc/1/

于 2015-10-01T19:09:35.563 に答える