I am trying to create a section using dragula js just like this:
http://bevacqua.github.io/dragula/
What I want is, the drag and drop should be dynamic. So that on each drag and drop the position of each element should be saved. How can I do that?
I know it can be done with php and ajax. But no idea on how the position should be manipulated
This question can be broken down into 2 different problems.
From what I can tell, dragula does not have a concept of tracking positioning of elements. You will have to devise a way to identify the parent container and the draggable items element. (div in the example). If you need to create the parent containers dynamically, you will need to track their order too. If you have a predefined layout, then all you need to do is track elements order and what parent they belong too. (for example, left or right, if we use the dragula example).
Create an id for each draggable element. You will have something like this.
<div id="left">
<div id="element1">Some text</div>
<div id="element2">Some other text</div>
</div>
When an element is dropped you will need to capture the element that was dropped and it's order to the parent container. To do this, you can use the jQuery index function to find the new index relative to the parent container. You will then need to reorder the list as you have it saved on the server side.
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
});
});
This depends on your requirements. If you are saving the heirarchy to a database you will need to save the parent container ID for each element, the order or position it is in and the elements ID.
To rerender the page with the elements in the same order they were dropped in you would simply loop over all the elements in each container and render them in the order they are saved.