Question

我正在使用HTML5Sortable plugins对列表进行排序。问题是，因为列表和它自动构建的项目，不会触发sortupdate事件监听器。

有人可以帮我吗？

如何在动态添加的elemetns上触发sortupdate事件？

这是mya代码：

    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是关于未触发的动态元素。

Answer 1

刚发现问题。

我通过将此索引0更改为1

来解决此问题

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

更改为

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

我不知道怎么做，而且我不知道索引系统是怎么回事，但它确实有效。

希望以后对某人有用。

更新1：

抱歉，上面的解决方案，有时候不起作用。我不知道为什么索引应该成为一个问题。所以我改变代码以dinamically采取数组中的最后一项。这是替换上面一行的代码

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

html5sortable - 不会在动态元素上触发sortupdate事件

1 个答案: