4

並べ替え可能な順序なしリストの最初のプレースホルダーを無効にする方法はありますか?

最初のアイテムをソートできるようにしたい (つまり、すべてのアイテムをドラッグ可能にする) 必要がありますが、最初のアイテムの後のアイテムを最初のアイテムの上にドロップできるようにしたくありません。

私はこの種の作業をしていますが、最初のプレースホルダーを無効にする代わりに、アイテムがドロップされるとソートがキャンセルされます:

$(".sortable").sortable({
    beforeStop: function(event, ui) {
        if(ui.placeholder.index() <= 1) {
            $(this).sortable('cancel');
        } else {
            //sort item
        }
    }
});

どんなポインタでも大歓迎です。

4

2 に答える 2

7

この問題の解決策を見つけました。あなたのコードは私の解決策からそれほど遠くありませんでした。

アイデアはchange、その位置に応じてプレースホルダーを表示/非表示にするオプションを使用し、位置が最初の場合はドロップをキャンセルすることです。

コード (ここでは jsFiddle ):

var cancelRequired = false;
$("#sortable1").sortable({
    placeholder: "sortable-placeholder",
    change: function(event, ui) {
        if (ui.placeholder.index() < 1) {
            $(ui.placeholder).css('display', 'none');
        } else {
            $(ui.placeholder).css('display', '');
        }
    },
    beforeStop: function(event, ui) {
        cancelRequired = (ui.placeholder.index() <= 1);
    },
    stop: function() {
        if (cancelRequired) {
            $(this).sortable('cancel');
        }
    }
});

beforeStopandで使用されているハックはstop、 cancel を内部で直接呼び出そうとしたときにバグが発生したために行われましたbeforeStop。このリンクに私を送る詳細はこちら。

このコードは、jQuery 1.8.2 および jQuery-ui 1.9.2 でテストされています。

于 2012-12-14T16:27:09.403 に答える
4

これを行うためのより簡単な方法を次に示します。この方法では、元に戻す機能も機能します。これを機能させるには、最初のアイテムにクラスを追加する必要があります。

HTML:

<ul id="sortable">
    <li class="no_sort sortable_first">First item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

脚本：

$('#sortable').sortable({
    placeholder: 'sortable_placeholder',
    cancel: '.no_sort',
    opacity: 0.5,
    revert: 100,
    change: function(event, ui) {
        if (ui.placeholder.index() < 1) {
            $('.sortable_first').after(ui.placeholder);
        }
    }
});

フィドル

于 2014-06-26T20:40:34.280 に答える