0
我正在使用HTML5Sortable plugins對列表進行排序。 問題是,因爲列表和它自動動態構建的項目,sortupdate事件偵聽器不會被觸發。html5sortable - 在動態元素上未觸發sortupdate事件
有沒有人可以幫助我?
如何在動態添加elemetns上觸發sortupdate事件?
這裏是妙代碼:
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();
我打開另一個類似的插件建議。 目前我使用這個插件,因爲據我所知,這是最好的插件和最穩定的拖放。我曾嘗試jQuery可排序,我不喜歡它,因爲它在拖放和拖放。
不幸的是,唯一的問題是此動作元素上的eventlistener未觸發。