jquery сортируемый порядок при перетаскивании

Question

Скажем, у меня есть эти два списка, куда я могу перетаскивать предметы из одного в другой. Первый список является источником всех возможных элементов. Второй список - это список элементов, которые выбирает пользователь. Во втором списке порядок элементов определяется пользователем, поэтому мой фактический код работает нормально. Я могу перетащить элемент слева туда, куда хочу справа. Первый список должен содержать определенный c порядок. Поэтому, если пользователь выбирает третий элемент из левого списка, перетаскивает его в правый, а затем возвращает его в левый список , он должен вернуться в третью позицию.

На самом деле Пользователь может решить вернуть его в любую позицию. В документации я не нашел возможности сохранить ul с указанным c заказом, это как-то управляется?

$( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
      placeholder: "ui-state-highlight"
    }).disableSelection();
  } );

  body {
    font-family: Arial, Helvetica, sans-serif;
  }

  table {
  	font-size: 1em;
  }

  .ui-draggable, .ui-droppable {
  	background-position: top;
  }
  
  #sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
  
  .ui-state-highlight { height: 1.5em; line-height: 1.2em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable1" class="connectedSortable" style="border: 1px solid;">
  <li class="ui-state-default">Item 1a</li>
  <li class="ui-state-default">Item 2a</li>
  <li class="ui-state-default">Item 3a</li>
  <li class="ui-state-default">Item 4a</li>
  <li class="ui-state-default">Item 5a</li>
</ul>
 
<ul id="sortable2" class="connectedSortable" style="border: 1px solid;">
  <li class="ui-state-default">Item 1b</li>
  <li class="ui-state-default">Item 2b</li>
  <li class="ui-state-default">Item 3b</li>
  <li class="ui-state-default">Item 4b</li>
  <li class="ui-state-default">Item 5b</li>
</ul>

Обратите внимание, что для простоты этот код взят из документации jQuery (у меня немного сложнее, но это важная часть ). Вот почему он все еще ссылается на jQuery 1. *. В настоящее время использую jQuery 3 в моем проекте

Answer 1

вам просто нужно поймать update событие сортируемого. Я бы порекомендовал вам сохранить исходный заказ

let originalOrder = {'first':1,'second':2,'third':3,'forth':4,'fifth':5};

и сохранить какой-то идентификатор в каждом элементе -

<li class="ui-state-default" data-value="first">Item 1b</li>

Также на случай, если мы хотим сохранить заказ только на один список, я бы разделил эти два сортируемых инициализации -

$( "#sortable1" ).sortable({
  connectWith: ".connectedSortable",
  placeholder: "ui-state-highlight",
  update: keepOriginalOrder
}).disableSelection();

$( "#sortable2" ).sortable({
  connectWith: ".connectedSortable",
  placeholder: "ui-state-highlight"
}).disableSelection();

И главное веселье c, которое будет делать все маги c -

function keepOriginalOrder(e, ui) {
        var selector = $('#sortable1'),
    element = selector.children('li');
    element.sort(function(a,b) { return originalOrder[$(a).attr('data-value')] - originalOrder[$(b).attr('data-value')]; });
    element.detach().appendTo(selector);
}

Я не сделал используйте просто числа в качестве идентификаторов, просто чтобы показать, что вы можете использовать исходное значение в качестве значения данных. Просто убедитесь, что вы установили originalOrder с правильными номерами.

Попробуйте это - https://jsfiddle.net/d1h8xvnj/