1

追加ボタンを介したカスタムユーザー入力に基づいて成長するソート可能なリストがあります。リストの上下の項目が最大です。そして最小値。値であり、それらがいつどこにドラッグされるかを知る必要があります。これを理解するために、Safari Inspector で「event」オブジェクトと「ui」オブジェクトを調べて、これらのオブジェクトに、取得した HTML オブジェクトの子のインデックス (番号) が含まれているかどうかを調べました。

これが私のコードです：

// Define the sorting settings/rules of the dsList (items list)
$('#dsList').sortable({
    handle: '.handle',
    cursor: 'move',
    axis: 'y',
    opacity: 0.7,
    scroll: true,
    start: function(event, ui) {

    },
    update: function(event, ui) {
        // Find out if the first or last item was dragged
        var firstDragged = false;
        var lastDragged = false;

        if ($(ui.item[0]).find('.firstItem').val() != undefined) {
            firstDragged = true;
        }

        if ($(ui.item[0]).find('.lastItem').val() != undefined) {
            lastDragged = true;
        }

        // Calculate the list values
        var itemsCount = $('#dsList').children().length;
        //console.log(itemsCount);

        // Check if the first item dragged below the last
        console.log(ui);


        // Update list settings
        updateListSettings();

        // Refresh the list
        updateList();
    }
});

ここでの問題は、「this」が親 (#dsList) を表し、ドラッグしているオブジェクトの子番号が見つからないことです。要素が移動したピクセル数を計算し、その高さを計算することはできますが、将来のスケーラビリティの観点からはその考えは好きではありません。

親(#dsList)に基づいて、ドラッグされた要素のchildCountを取得する方法はありますか?

4

2 に答える 2

0

私があなたを正しく理解しているなら、ドラッグされたオブジェクトが兄弟のリストの最初か最後かを調べたいと思います。その仮定が正しければ、次を使用することをお勧めします。

if (ui.item.prevAll().length == 0) {
    firstDragged = true;
}

if (ui.item.nextAll().length == 0) {
    lastDragged = true;
}

2月12日の更新：あきらめる前に、私はこのjsfiddleで別のアプローチを試しましたが、それは私のために機能します：

$( "#dslist" ).sortable({
    opacity: 0.7
    ,revert:600
    ,delay:100
    ,scroll: true
    ,start: function( event, ui ) {
        var $items = $(this).children(
            ":not(.ui-sortable-helper,.ui-sortable-placeholder)"
        );
        $(this).data("firstDragged", ui.item.is( $items.first() ));
        $(this).data("lastDragged", ui.item.is( $items.last() ));
    }
    ,update: function( event, ui ) {
        console.log("firstDragged: " + $(this).data("firstDragged"));
        console.log("lastDragged: " + $(this).data("lastDragged"));
    }
});

これがお役に立てば幸いです。

于 2013-02-11T21:09:05.683 に答える
0

あまりきれいではない修正が見つかりましたが、少なくとも機能します：

    update: function(event, ui) {
        // Calculate the list values
        var itemsCount = $('#dsList').children().length;

        // Refresh the list to be able to search for the change
        $(this).sortable('refreshPositions');

        // Check if the first item dragged below the last
        if ($('#dsList .dsListItem:nth-last-child(1) .firstItem').attr('autocomplete') == 'off') {
            console.log('first item is moved beyond last');
        }

        // Check if the last item dragged above the first
        if ($('#dsList .dsListItem:nth-child(1) .lastItem').attr('autocomplete') == 'off') {
            console.log('last item is moved above first');
        }

        // Update list settings
        updateListSettings();

        // Refresh the list
        updateList();
    }

どういうわけか、返されたオブジェクトが完全に空ではないため、その中にオブジェクトがあるかどうかを確認する必要がありました。このようにして、.firstItem がヒープの最後に到達したかどうか、およびその逆かどうかを確認できます。

$(this).sortable('refreshPositions');

..必須です！または、update 呼び出しを使用しても、オブジェクトがマッシュアップされます。

于 2013-02-11T21:19:55.587 に答える