Как получить все индексы, включая атрибут данных, после сортировки сортируемых элементов?

Question

В настоящее время я реализовал сортировку jQuery. Сейчас я ищу способ получить все индексы и дополнительные данные всех 2-х связанных элементов списка в одном массиве после каждого перетаскивания. Массив должен выглядеть так:

let arrayOfObjects = [
    {
        index: 0, //Should be the index of an element
        identifier: 0, //Should be the data-id of each element
        parent_id: 0 //Should be the data-parent-id of the dropped ul
    }
]

jQuery( document ).ready( function ( $ ) {
	$( "#first, #second" ).sortable( {
		connectWith: ".sortable",
		stop: function ( event, ui ) {
      //Maybe here?
		}
	} );
} );

.wrapper {
  display: flex;
}

ul {
  padding: 0;
  flex: 1;
}

ul:first-child {
  margin-right: 20px;
}

li {
  padding: 10px;
  border: 1px solid #000000;
  margin-bottom: 6px;
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/ui/widget.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-sortable@1.0.0/jquery-ui.min.js"></script>
<div class="wrapper">
    <ul id="first" class="sortable" data-parent-id="1">
        <li data-id="1" class="element">1</li>
        <li data-id="2" class="element">2</li>
        <li data-id="3" class="element">3</li>
        <li data-id="4" class="element">4</li>
        <li data-id="5" class="element">5</li>
        <li data-id="6" class="element">6</li>
    </ul>
    <ul id="second" class="sortable" data-parent-id="2">
        <li data-id="7" class="element">1</li>
        <li data-id="8" class="element">2</li>
        <li data-id="9" class="element">3</li>
        <li data-id="10" class="element">4</li>
        <li data-id="11" class="element">5</li>
        <li data-id="12" class="element">6</li>
    </ul>
</div>

Как я могу это сделать? Когда я регистрирую свой массив, я ожидаю, что все элементы как объекты в моем массиве со всеми необходимыми параметрами. Я много пробовал, использовал ui.item.index(), но безуспешно.

Answer 1

Я не уверен, что вы подразумеваете под index: 0, // Должен быть индекс элемента В приведенном ниже примере index будет установлено в позицию элемента в родительском элементе ul.

jQuery(document).ready(function($) {

  function getArr() {
    return $("li").map(function() {
      return {
        index: $(this).index(),
        identifier: $(this).data("id"),
        parent_id: $(this).parent().data("parent-id")
      }
    }).get();
  }

  let arrayOfObjects = getArr();

  console.log(arrayOfObjects);

  $("#first, #second").sortable({
    connectWith: ".sortable",
    stop: function(event, ui) {
      arrayOfObjects = getArr();
      console.log(arrayOfObjects);
    }
  });
});

.wrapper {
  display: flex;
}

ul {
  padding: 0;
  flex: 1;
}

ul:first-child {
  margin-right: 20px;
}

li {
  padding: 10px;
  border: 1px solid #000000;
  margin-bottom: 6px;
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/ui/widget.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-sortable@1.0.0/jquery-ui.min.js"></script>
<div class="wrapper">
  <ul id="first" class="sortable" data-parent-id="1">
    <li data-id="1" class="element">1</li>
    <li data-id="2" class="element">2</li>
    <li data-id="3" class="element">3</li>
    <li data-id="4" class="element">4</li>
    <li data-id="5" class="element">5</li>
    <li data-id="6" class="element">6</li>
  </ul>
  <ul id="second" class="sortable" data-parent-id="2">
    <li data-id="7" class="element">1</li>
    <li data-id="8" class="element">2</li>
    <li data-id="9" class="element">3</li>
    <li data-id="10" class="element">4</li>
    <li data-id="11" class="element">5</li>
    <li data-id="12" class="element">6</li>
  </ul>
</div>

Answer 2

Это даст вам объект, который вы ищете:

const list = document.querySelectorAll("[data-id]");

const listItems = Array.from(list).map((item, i) => ({
  index: item.dataset.id,
  identifier: i,
  parent_id: item.parentNode.dataset.parentId
}));