If you need to sort some elements dynamically with drag'n'drop, you can use the Admin2.Sortable
plugin.
Basic setup
var list = document.getElementById('#my-sortable-list');
new Admin2.Sortable(list, 'li');
The first parameter is the parent (typically a list). The second one is the children selector (the items to sort).
Order changes
When the order of the children changes, the third parameter is called:
new Admin2.Sortable(list, 'li', function (children) {
Array.prototype.forEach.call(children, function (item, index) {
item.dataset.order = index;
});
});
This code shows how to put the value of data-order
attribute. You can also put this value into a hidden input, which could then be retrieved by the server.
Setup callback
When the plugin is set up, a callback can be called if you need to apply some extra code. That's the fourth parameter.
new Admin2.Sortable(list, 'li', null, function (children) {
console.dir(this); // `this` will be the `Admin2.Sortable` object
});
The function currently receives only one parameter: the items to sort.