0
HTML5Sortable pluginsを使用してリストをソートしています。 問題は、リストとそれ自身が動的に構築するため、sortupdateイベントリスナーがトリガーされないことです。html5sortable - 動的要素でsortupdateイベントが発生していません
私に助けてくれる人はいますか？
動的に追加されたエレメントで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をソート可能にしようとしています。ドラッグアンドドロップでちらっと見えるので、私はそれを気に入っていません。
唯一の問題は、このイベントリスナーがトリガーされていない動的要素にあることです。