Javascript Dragula：如何始终将项目移动到列表的末尾

我正在使用Dragula创建一个拖放页面。它工作得很好。但在我的情况下，我需要将项目移到列表的末尾。总是

这是我的Javascript代码

dragula([
        document.getElementById('left'),
        document.getElementById('right')
    ])

    .on('drag', function (el) {

        // add 'is-moving' class to element being dragged
        el.classList.add('is-moving');
        console.log(el.classList);
    })
    .on('dragend', function (el) {

        // remove 'is-moving' class from element after dragging has stopped
        el.classList.remove('is-moving');

        // add the 'is-moved' class for 600ms then remove it
        window.setTimeout(function () {
            el.classList.add('is-moved');
            window.setTimeout(function () {
                el.classList.remove('is-moved');
            }, 600);
        }, 100);
    });


var createOptions = (function () {
    var dragOptions = document.querySelectorAll('.drag-options');

    // these strings are used for the checkbox labels
    var options = ['Research', 'Strategy', 'Inspiration', 'Execution'];

    // create the checkbox and labels here, just to keep the html clean. append the <label> to '.drag-options'
    function create() {
        for (var i = 0; i < dragOptions.length; i++) {

            options.forEach(function (item) {
                var checkbox = document.createElement('input');
                var label = document.createElement('label');
                var span = document.createElement('span');
                checkbox.setAttribute('type', 'checkbox');
                span.innerHTML = item;
                label.appendChild(span);
                label.insertBefore(checkbox, label.firstChild);
                label.classList.add('drag-options-label');
                dragOptions[i].appendChild(label);
            });

        }
    }

    return {
        create: create
    }


}());

var showOptions = (function () {

    // the 3 dot icon
    var more = document.querySelectorAll('.drag-header-more');

    function show() {
        // show 'drag-options' div when the more icon is clicked
        var target = this.getAttribute('data-target');
        var options = document.getElementById(target);
        options.classList.toggle('active');
    }


    function init() {
        for (i = 0; i < more.length; i++) {
            more[i].addEventListener('click', show, false);
        }
    }

    return {
        init: init
    }
}());

var leftList = document.querySelector('#left');
var rightList = document.querySelector('#right');
var list = document.querySelectorAll('#right li, #left li');
var itemMoving = undefined;
for (var i = 0; i < list.length; i++) {
    list[i].addEventListener('click', function () {
        if (this.parentNode.id == 'right') {
            itemMoving = this;
            leftList.appendChild(this);
        } else {
            itemMoving = this;
            rightList.appendChild(this);
        }

        // add the 'is-moved' class for 600ms then remove it
        window.setTimeout(function () {
            itemMoving.classList.add('is-moved');
            window.setTimeout(function () {
                itemMoving.classList.remove('is-moved');
            }, 600);
        }, 100);

    });
}

createOptions.create();
showOptions.init();

德拉古拉([ document.getElementById（'left'）， document.getElementById（'right'） ]) .on（'drag'，函数（el）{ //将“正在移动”类添加到正在拖动的元素 el.classList.add（'is-moving'）； 控制台日志（el.classList）； }) .on（'dragend'，函数（el）{ //停止拖动后从元素中删除“正在移动”类 el.classList.remove（'is-moving'）； //添加“已移动”类600毫秒，然后将其删除 setTimeout（函数（）{ el.classList.add（'is-moved'）； setTimeout（函数（）{ el.classList.remove（'is-moved'）； }, 600); }, 100); }); var createOptions=（函数（）{ var dragOptions=document.querySelectorAll（'.drag options'）； //这些字符串用于复选框标签 var选项=[‘研究’、‘策略’、‘灵感’、‘执行’]； //在此处创建复选框和标签，以保持html的干净。将添加到“.拖动选项” 函数create（）{ 对于（变量i=0；i

---

您可以像这样钩住dragula的

shadow

事件，强制将被拖动元素的卷影副本附加到容器中：

.on（'shadow'，函数（el、容器、源）{
//检查卷影副本是否不是容器的最后一个子级
if（el！==container.children[container.children.length-1]）{
//否则：就这样吧
子容器（el）；
}
})

工作示例（全屏最佳浏览）：

德拉古拉([ document.getElementById（'left'）， document.getElementById（'right'） ]) .on（'drag'，函数（el）{ //将“正在移动”类添加到正在拖动的元素 el.classList.add（'is-moving'）； }) .on（'shadow'，函数（el、容器、源）{ if（el！==container.children[container.children.length-1]）{ 子容器（el）； } }) .on（'dragend'，函数（el）{ //停止拖动后从元素中删除“正在移动”类 el.classList.remove（'is-moving'）； //添加“已移动”类600毫秒，然后将其删除 setTimeout（函数（）{ el.classList.add（'is-moved'）； setTimeout（函数（）{ el.classList.remove（'is-moved'）； }, 600); }, 100); }); var createOptions=（函数（）{ var dragOptions=document.querySelectorAll（'.drag options'）； //这些字符串用于复选框标签 var选项=[‘研究’、‘策略’、‘灵感’、‘执行’]； //在此处创建复选框和标签，以保持html的干净。将添加到“.拖动选项” 函数create（）{ 对于（变量i=0；i