1

我有可排序的列表，该列表基于通过添加按钮的自定义用户输入而增长。列表中的顶部和底部项目是最大值。和分钟。值，我需要知道它们何时被拖动以及到哪里。为了弄清楚这一点，我查看了 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吗？

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

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

于 2013-02-11T21:19:55.587 回答