I am using HTML5Sortable plugins to sort a list. the problem is, because the list and the item it self builds dynamically, the sortupdate event listener is not triggered.
Is there anyone could help me please?
How to trigger the sortupdate event on dynamically added elemetns?
here is mya codes:
var url = 'some URL;
var divtree = $(".tree-module");
divtree.empty();
$.get(url).done(function (hasil) {
var isi = '';
isi += '<ol class="tree ">';
isi += ' <li>';
isi += ' <label>Module<input type="checkbox"/></label>';
isi += ' <ol class="module-tree">';
$.each(hasil.master, function (i, row) {
isi += '<li class="file li-module" data-id="' + row.id + '" data-urut="' + row.urut + '">'
isi += '<a href="#module-' + row.id + '" data-module_id="' + row.id + '" class="tree-link-child">' + row.nama + '</a>'
isi += '</li>'
});
isi += ' </ol>';
isi += ' </li>';
isi += '</ol>';
divtree.html(isi);
destroy_sortable();
make_sortable();
});
var tbody_class = '.module-tree';
var destroy_sortable = function () {
sortable(tbody_class, 'destroy');
}
var make_sortable = function () {
sortable(tbody_class, {
items: '.li-module',
placeholder: '<li class="file li-module bg-yellow" ><a class="tree-link-child" href="">Geser kesini..</a></li>'
});
sortable(tbody_class)[0].addEventListener('sortupdate', function (e) {
/*
This event is triggered when the user stopped sorting and the DOM position has changed.
e.detail.item contains the current dragged element.
e.detail.index contains the new index of the dragged element (considering only list items)
e.detail.oldindex contains the old index of the dragged element (considering only list items)
e.detail.elementIndex contains the new index of the dragged element (considering all items within sortable)
e.detail.oldElementIndex contains the old index of the dragged element (considering all items within sortable)
e.detail.startparent contains the element that the dragged item comes from
e.detail.endparent contains the element that the dragged item was added to (new parent)
e.detail.newEndList contains all elements in the list the dragged item was dragged to
e.detail.newStartList contains all elements in the list the dragged item was dragged from
e.detail.oldStartList contains all elements in the list the dragged item was dragged from BEFORE it was dragged from it
*/
console.log(tbody_class + ' sortupdate()');
});
};
make_sortable();
I am open to another similar plugins suggestion. Currently I am using this plugin because so far as i know, this is the best plugin and the most stable on drag and dropping. I have tried jQuery sortable, and i dont like it because its flikering on drag and drop.
Unfortunatelly, the only problem is this eventlistener on dynamic elements that is not triggered.