Sortable

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.