jQuery UI；在拖动可排序项目时知道child#

Question

我有一个可排序的列表，它可以通过添加按钮根据自定义用户输入进行增长。列表中顶部和底部的项目是最大值。和min.值，我需要知道它们何时被拖动以及被拖到哪里。为了弄清楚这一点，我查看了Safari Inspector中的"event“和"ui”对象，以找出这些对象是否包含抓取的HTML-Object是哪个子级的索引(编号)。

下面是我的代码：

// 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吗？

Answer 1

我找到了一个不是很好的修复方法，但至少它是有效的：

    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调用，对象也会被混杂在一起。

Answer 2

如果我没理解错的话，你想知道一个被拖动的对象在它的同级列表中是第一个还是最后一个。如果这个假设是正确的，那么我建议使用：

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

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

2月12日更新:在放弃之前，我在this 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"));
    }
});

希望这能有所帮助。