javascript - 可嵌套/可排序的序列化列表，无需从列表中删除原始项目

Question

我已经使用 Bushell ( https://github.com/dbushell/Nestable ) 的 Nestable JS 一段时间了，并且有很多可用的代码来从 Mysql 生成菜单，但我需要将可用选项从一个列表拖动到另一个列表，而不将其从列表中删除来源。

我只想将其附加到列表的第二个列表中。这对于 Nestable 来说合理吗？还是我需要跑回 jquery Draggable 才能获得“克隆”选项？我发现可以说明的演示:http://jsfiddle.net/Aub7x/

在这个演示中，这很容易，除非您使用 $( ".items").sortable( "toArray"); 它不会返回我可以使用的嵌套格式来识别亲子关系。否则，它是一个比 Bushell 库更干净的代码库。 http://jsfiddle.net/trevordowdle/6CDSB/1/

由于我链接到 JSFiddle，因此需要发布一些代码。在 Bushell 代码中，我正在努力查找从源中删除项目的位置，但在这里没有看到它:

list.el.on('click', 'button', function(e) {
    if (list.dragEl) {
        return;
    }
    var target = $(e.currentTarget),
        action = target.data('action'),
        item   = target.parent(list.options.itemNodeName);
    if (action === 'collapse') {
        list.collapseItem(item);
    }
    if (action === 'expand') {
        list.expandItem(item);
    }
});

var onStartEvent = function(e)
{
    var handle = $(e.target);

    /* callback for beforeDragStart */
    list.el.trigger('beforeDragStart', [handle]);

    if (!handle.hasClass(list.options.handleClass)) {
        if (handle.closest('.' + list.options.noDragClass).length) {
            return;
        }
        handle = handle.closest('.' + list.options.handleClass);
    }

    if (!handle.length || list.dragEl) {
        return;
    }

    list.isTouch = /^touch/.test(e.type);
    if (list.isTouch && e.touches.length !== 1) {
        return;
    }

    e.preventDefault();
    list.dragStart(e.touches ? e.touches[0] : e);

    /* callback for dragStart */
    var item = list.dragEl.find('.'+list.options.itemClass);
    list.dragRootEl.trigger('dragStart', [
        item,           // List item
        list.el        // Source list
    ]);
};

Answer 1

我在这里想出了一个解决方案:https://github.com/dbushell/Nestable/issues/158

您可以将“克隆”类添加到要从一个列表拖动到另一个列表的任何内容。

将其放在第 325 行附近:

if ($(dragItem[0]).hasClass("clone"))
{
    var cln=dragItem[0].cloneNode(true);
    dragItem[0].parentNode.replaceChild(cln, dragItem[0]);
    $(dragItem[0]).removeClass("clone")
    dragItem.after(this.placeEl);
}else{
    dragItem.after(this.placeEl);
    dragItem[0].parentNode.removeChild(dragItem[0]);
}