Как сделать перетаскивание с помощью dragula js динамического
Я пытаюсь создать раздел, используя dragula js, вот так:
http://bevacqua.github.io/dragula/
Я хочу, чтобы перетаскивание было динамичным. Так что при каждом перетаскивании позиция каждого элемента должна быть сохранена. Как я могу это сделать?
Я знаю, что это можно сделать с помощью php и ajax. Но понятия не имею, как следует манипулировать позицией
Решение
Этот вопрос можно разбить на 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
});
});
- Как мне сохранить порядок элементов?
Это зависит от ваших требований. Если вы сохраняете иерархию в базе данных, вам необходимо сохранить идентификатор родительского контейнера для каждого элемента, порядок или позицию, в которой он находится, и идентификатор элемента.
Чтобы перерисовать страницу с элементами в том же порядке, в котором они были добавлены, вы просто зациклите все элементы в каждом контейнере и отобразите их в порядке их сохранения.
Другие решения
detector