Question

我有可排序的列表，它通过添加按钮基于自定义用户输入而增长。列表中的顶部和底部项目是最大值。和分钟。值和我需要知道它们何时被拖动以及何处被拖动。为了解决这个问题，我查看了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

如果我理解正确，您想知道拖动的对象是否在其兄弟列表中是第一个或最后一个。如果这个假设是正确的，那么我建议使用：

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"));
    }
});

希望这会有所帮助。

Answer 2

找到了一个不那么漂亮的修复程序，但它起码至少有效：

    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');

..是必须的！或者即使使用更新调用，对象也将被混淆。

jQuery UI;拖动可排序项目时知道孩子＃

2 个答案: