无效/可排序的序列化列表，而无需从列表中删除原始项目

Nestable / sortable serialized list without removing the original item from list

本文关键字：列表 删除 项目 原始 排序 无效 序列化      更新时间：2023-09-26

我已经使用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
    ]);
};

我能够在这里想出一个解决方案：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]);
}
相关文章：