Как сделать перетаскивание с помощью dragula js динамического

Question

Как сделать перетаскивание с помощью dragula js динамического

Я пытаюсь создать раздел, используя dragula js, вот так:

http://bevacqua.github.io/dragula/

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

Я знаю, что это можно сделать с помощью php и ajax. Но понятия не имею, как следует манипулировать позицией

2

ajax drag-and-drop dragula jquery php

Решение

Другие решения

Просмотрите это [http://codepen.io/rachelslurs/pen/EjKmLG]

Также другие пример в основном похоже на ваш пример с dragon js
образец код для проверки и настройки

0

Источник

Accepted Answer

Этот вопрос можно разбить на 2 разные проблемы.

Как мне отслеживать порядок элементов?

Из того, что я могу сказать, Dragula не имеет концепции отслеживания расположения элементов. Вам нужно будет найти способ идентифицировать родительский контейнер и элемент перетаскиваемых элементов. (div в примере). Если вам нужно динамически создавать родительские контейнеры, вам также необходимо отслеживать их порядок. Если у вас есть предопределенный макет, то все, что вам нужно сделать, это отследить порядок элементов и их родителям тоже. (например, влево или вправо, если мы используем пример с draguula).

Создайте идентификатор для каждого перетаскиваемого элемента. У вас будет что-то вроде этого.

<div id="left">
<div id="element1">Some text</div>
<div id="element2">Some other text</div>
</div>

Когда элемент отброшен, вам нужно будет захватить элемент, который был отброшен, и его порядок в родительском контейнере. Для этого вы можете использовать функцию индекса jQuery, чтобы найти новый индекс относительно родительского контейнера. Затем вам нужно будет изменить порядок списка, поскольку он был сохранен на стороне сервера.

draggableElements.on('drop',function(el)
{
var parentElId = $(el).parent().attr('id');
var droppedElIndex = $(el).index();
var droppedElId = $(el).attr('id');
$.ajax({
url: "itemDropped.php",
type: 'GET',
data: { parentIdParam: parentElId,
droppedIndexParam: droppedElIndex,
droppedIdParam: droppedElId   }
}).done(function() {
//do something else
});
});

Как мне сохранить порядок элементов?

Это зависит от ваших требований. Если вы сохраняете иерархию в базе данных, вам необходимо сохранить идентификатор родительского контейнера для каждого элемента, порядок или позицию, в которой он находится, и идентификатор элемента.

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

2