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

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

使用 sortable 的停止事件然后添加：

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

jsFiddle example

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

How to always drop element at first position?

jquery

jquery-ui