Как всегда опустить элемент на первую позицию?

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

Используйте событие остановки сортировки и затем добавьте:

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

jsFiddle пример