2

複数の level を持つソート可能なリストが必要です。このブログで簡単に説明されているので試してみました

しかし、複数のレベルで試してみると、うまくいきません:(

これは私が必要とする構造です

<div class='sortable'>
    <div class='item1'>aa</div>
    <div class='item1'>
        <div class='item2'>bb</div>
        <div class='item2'>cc</div>
        <div class='item2'>dd</div>
    </div>
    <div class='item1'>ee</div>
</div>

そして、スクリプト

$(".sortable").sortable();
$(".item1").sortable();

sortable()にsortable classと の子を割り当てるとitem1 class、すべてのitem1とitem2クラスがdraggable="true"プロパティを割り当て、子を の下にドラッグできませんitem1。item2要素は親の内側にドラッグするだけですitem1

両方のレベルを同時にソート可能にするための良い解決策はありますか

ありがとう

4

2 に答える 2

2

これはあなたが必要とする動作ですか？

http://jsfiddle.net/JKqrX/1/

アイデアは、「item1」を子要素を持ち、すべての「item1」のハンドルを持つ個別のソート可能にして、両方のレベルを快適にソートできるようにすることです。ドラッグ用のハンドラーの代わりに、任意の画像またはドラッグ アイコンを配置できます。

//HTML
<div class='sortable'>
    <div class='item1'><span class="handle">handle   </span>aa</div>
    <div class='item1 has-child'>
        <span class="handle">handle   </span>
        <div class='item2'>bb</div>
        <div class='item2'>cc</div>
        <div class='item2'>dd</div>
    </div>
    <div class='item1'><span class="handle">handle   </span>ee</div>
</div>

//JS
$(".has-child").sortable({
    items: ".item2"
});
$(".sortable").sortable({
    handle: ".handle"
});
于 2013-07-22T13:56:27.790 に答える
0

あなたはそのようなことを試すことができます：

<div class='sortable'>
    <div class='item1'>aa</div>
    <div class='item3'>
        <div class='item2'>bb</div>
        <div class='item2'>cc</div>
        <div class='item2'>dd</div>
    </div>
    <div class='item1'>ee</div>
</div>

$(".item3").sortable({
    connectWith: ".sortable"
});
$(".sortable").sortable({
    connectWith: ".item3"
}).disableSelection();
于 2013-07-04T18:57:28.723 に答える