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

Question

[FANTASANTA]

Делаю "ручную настройку" для позиции категорий, что бы можно было перетаскивать подкатегории с одной позиции на другую - и соответственно сохранять это дело в бд.
Использую плагин SortableJS.

Вопрос такой: Допустим есть такой список категорий:

<ul>
     <li>Категория 1</li>
     <li>Категория 2</li>
     <li>Категория 3</li>
     <li>Категория 4</li>
     <li>Категория 5</li>
</ul>

- когда я перетаскиваю Категорию-5 на место 1 - я меняю его позицию на 1. А как мне поменять позицию 1 категории, которая переместилась на одну позицию вниз?

Answer 1

[FANTASANTA]

Нашел решение! Оставлю это здесь, на случай если кому будет нужно.

Итак, нам нужно при перетаскивании какого-либо элемента, получить позиции других элементов, которые переместились на место перетаскиваемого элемента. Я покопался в Гугле, и нашел решение, которое мне подходит более чем.

Это код нашего списка:

<ul>
     <li class="item" data-id="1">Категория 1</li>
     <li class="item" data-id="2">Категория 2</li>
     <li class="item" data-id="3">Категория 3</li>
     <li class="item" data-id="4">Категория 4</li>
     <li class="item" data-id="5">Категория 5</li>
</ul>

Каждый элемент имеет свой id - в моем случае это id категории.

Далее создадим массив путем обращения к классу .item:

function getOrder() {
	let order = {};
	$('.item').each(function() {
		order[$(this).data('id')] = $(this).index();
	});
	return order;
}

После этого в событии вашего плагина для перетаскивания (в моем случае - SortableJS), ставим код:

$('.block').sortable({
	animation: 150,
	ghostClass: 'blue-background-class',
	onEnd: function(event) {
		$.ajax({
			type: 'POST',
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			url: '/url',
			data: {"order": getOrder()},
			success: function (data) { 
				alert(data);
			}
		});
	}
});

И разумеется в бэкенде обрабатываем запрос order. В моем случае это PHP/Laravel:

foreach($request->order as $id => $index) {
	Category::where('id', $id)->update(['position' => $index]);
}

Надеюсь кому-нибудь поможет.