2017-09-14 86 views
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未觸發。

回答

0

剛發現問題。

我解決了這個改變的0這個指數1

sortable(tbody_class)[0].addEventListener('sortupdate', function (e) { 

變化

sortable(tbody_class)[1].addEventListener('sortupdate', function (e) { 

我不知道我怎麼了,不知道事件的指標體系是怎樣的,但有用。

希望以後對他人有用。

UPDATE 1:

抱歉,上述方案中,有時不工作。我不知道爲什麼索引應該成爲一個問題。所以我將代碼更改爲dinamically獲取數組中的最後一項。這裏是代碼以上代碼

if(sortable(tbody_class).length > 0) { 
     sortable(tbody_class)[sortable(tbody_class).length-1].addEventListener('sortupdate', function (e) { 
相關問題