javascript - 在连接到可拖动列表的 jQuery 可排序项中，我如何告诉特定列表项可拖动项被拖放到上面？

Question

考虑以下一对列表：

user's queue
<ul id='list1'>
    <li>Some</li>
    <li>Thing</li>
</ul>eligible items
<ul id='list2'>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Electric Banana</li>
    <li>Flamingo Pink</li>
</ul>

<script>
jQuery(function($) {
    $('#list2 li').draggable({
        cursor: 'move',
        helper: 'clone',
        connectToSortable: "#list1",
        update: function(event, ui){
            // In here, I can get the item being dragged by inspecting
            // event.toElement (and probably other ways as well), and
            // I can find the list I am dropping onto by inspecting 
            // event.target.

            // But, how do I tell what particular list item in the "user's
            // queue" (#list1) list that the item is being dropped onto?
            // E.g., if I drop "Green" onto "Thing", so it displaces "Thing",
            // and the list now contains "Some, Green, Thing", how can I tell
            // here in code that "Green" was dropped onto "Thing"?
        }
    });
    $('#list1').sortable({
        revert: true,
    });
});
</script>

这是该代码的小提琴。

代码中的注释概述了我的问题。再说一遍，我想知道如何以编程方式确定可拖动元素被拖放到的特定列表项？

Answer 1

如果您的意思是 sortable 的更新，那么您可以这样做：

 $('#list1').sortable({
        revert: true,
        update: function(event, ui){
            ui.item.prev().css('color', 'green'); //get the prev element of item sorted just now, applies for the dropped as well
            ui.item.next().css('color', 'blue');//get the next element of item sorted just now, applies for the dropped as well
        }
    });

像这样的东西？

  $('#list1').sortable({
        revert: true,
        update: function(event, ui){
            $('.next, .prev').removeClass('next prev');

            var $prevElem = ui.item.prev(),
                $nextElem = ui.item.next();
            $prevElem.addClass('prev');
            $nextElem.addClass('next');
            console.log('Item sorted is before ' + $prevElem.text() + ' after ' + $nextElem.text());
        }
    });

演示