如何始终将元素放在第一个位置

Question

我正在使用Jquery UI来连接列表，以便我可以将元素从一个列表排序到另一个列表。我唯一的问题是我不知道如何始终将元素放在第一个位置，无论我拖到哪里。如果我从一个列表拖动到另一个列表，我希望该元素位于该列表中的第一个位置。

我已经设置了所有内容，并创建了jsfiddle文件。

https://jsfiddle.net/chille1987/nvyztwku/14/

<div class="flex">
    <ul id="sortable1" class="column">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
    </ul>
    <ul id="sortable2" class="column">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
    </ul>
 </div>
$( function() {
    $('.column').sortable({
      connectWith: '.column'
    });
});

Answer 1

使用可排序对象的 stop 事件，然后在前面加上：

$(function() {
  $('.column').sortable({
    connectWith: '.column',
    stop: function(event, ui) {
      $(ui.item).prependTo($(ui.item).parent())
    }
  });
  $("#sortable1 li, #sortable2 li").disableSelection();
});

js小提琴示例