Javascript 在标准jQueryUI下拉菜单上进行花式树拖放

我正试图在标准的jQueryUI下拉列表（列表视图）上实现拖放花式树节点

我希望在拖放时将树节点拖放到列表视图中所需的确切位置，而不是稍后在列表视图中重新排序/排序，如果我们添加helper:clone和connecttosortable选项，jquery UI似乎可以使用，但是当我尝试将这些选项与fancy tree一起使用时，它并没有按预期工作，没有它们也可以正常工作，但无法解决问题

这是JSFIDLE

带有键和工具提示的item1
第2项

文件夹中有一些子文件夹


分项目3.1

子项3.1.1
第3.1.2项


分项目3.2

子项3.2.1
子项3.2.2



带有一些子项的文档（在init上展开）


分项4.1（主动和专注于初始）

子项4.1.1
子项4.1.2


分项4.2

子项4.2.1
第4.2.2子项



在此处添加项目

沙文

 $("#tree").fancytree({
    extensions: ["dnd"],
    checkbox: true,
    selectMode: 3,
    //      debugLevel: 1,       
    activate: function (event, data) {
    },
    //lazyLoad: function (event, data) {
    //    data.result = { url: "ajax-sub2.json" }
    //},
    dnd: {
        preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
        preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
        autoExpandMS: 400,
        // focusOnClick: true,
        refreshPositions: true,
        draggable: {
            appendTo: "body",
            //  helper: "clone",
           //   connectToSortable: "#cart ol",
            // scroll: false,
            // containment: "parent",  // $("ul.fancytree-container"),
            // cursorAt: { left: 5 },
            revert: "invalid"
            // revert: function(dropped) {
            //   return
            // }
        },
        dragStart: function (node, data) {
            // allow dragging `node`:
            return true;
        },
        initHelper: function (node, data) {
            // Helper was just created: modify markup
            var helper = data.ui.helper,
                tree = node.tree,
                sourceNodes = [];

            //Store a list of active + all selected nodes
            if (!node.isSelected()) {
                sourceNodes.unshift(node);
            }
            helper.data("sourceNodes", sourceNodes);
            // Mark selected nodes also as drag source (active node is already)
            $(".fancytree-active,.fancytree-selected", tree.$container)
              .addClass("fancytree-drag-source");
            // Add a counter badge to helper if dragging more than one node
            if (sourceNodes.length > 1) {
                helper.append($("<span class='fancytree-childcounter'/>")
                  .text("+" + (sourceNodes.length - 1)));
            }
            // Prepare an indicator for copy-mode
            helper.prepend($("<span class='fancytree-dnd-modifier'/>")
              .text("+").hide());
        },

        dragDrop: function (node, data) {
            var sourceNodes = data.ui.helper.data("sourceNodes"),
                      event = data.originalEvent,
                      copyMode = event.ctrlKey || event.altKey;

            if (copyMode) {
                $.each(sourceNodes, function (i, o) {
                    o.copyTo(node, data.hitMode, function (n) {
                        delete n.key;
                        n.selected = false;
                        n.title = "Copy of " + n.title;
                    });
                });
            }
        }
    }
});
$("#LoadingTree").hide();



 $("#cart ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        var node = $(ui.helper).data("ftSourceNode"),
          tree = node.tree,
          copyMode = event.ctrlKey || event.altKey,
          sourceNodes = ui.helper.data("sourceNodes");

        if (!copyMode) {
            $.each(sourceNodes, function (i, o) {
                o.setSelected(true);
            });
        }
        $(this).find(".placeholder").remove();
        if (sourceNodes.length > 0)
            $("<li></li>").text(sourceNodes[0].title).appendTo(this);
    },
    over: function (event, ui) {
        var obj = ui;
    }
}).sortable({
    items: "li:not(.placeholder)",
    connectWith:"#fancytree",
    sort: function () {
        // gets added unintentionally by droppable interacting with sortable
        // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
        $(this).removeClass("ui-state-default");
    }
});

$（“#树”）.fancytree({
扩展名：[“dnd”]，
复选框：正确，
选择模式：3，
//级别：1，
激活：功能（事件、数据）{
},
//lazyLoad：函数（事件、数据）{
//data.result={url:“ajax-sub2.json”}
//},
dnd：{
preventVoidMoves:true、//防止在“自我”之前删除节点，等等。
preventRecursiveMoves:true，//防止在自己的子体上删除节点
自动扩展：400，
//focusOnClick：没错，
他说:对,，
可拖动：{
附：“身体”，
//助手：“克隆”，
//connectToSortable:“#购物车ol”，
//卷轴：错，
//安全壳：“父级”//$（“ul.fancytree容器”），
//光标：{左：5}，
回复：“无效”
//恢复：功能（已删除）{
//返回
// }
},
dragStart:函数（节点、数据）{
//允许拖动“节点”：
返回true；
},
initHelper:函数（节点、数据）{
//刚刚创建了助手：修改标记
var helper=data.ui.helper，
tree=node.tree，
sourceNodes=[]；
//存储活动节点+所有选定节点的列表
如果（！node.isSelected（））{
sourceNodes.unshift（节点）；
}
helper.data（“sourceNodes”，sourceNodes）；
//将选定节点也标记为拖动源（活动节点已处于活动状态）
$（“.fancytree处于活动状态，.fancytree处于选定状态”，tree.$container）
.addClass（“fancytree拖动源”）；
//如果拖动多个节点，请向辅助对象添加计数器标记
如果（sourceNodes.length>1）{
helper.append（$（“”）
.text（“+”+（sourceNodes.length-1））；
}
//为复制模式准备指示器
helper.prepend（$（“”）
.text（“+”.hide（））；
},
dragDrop：函数（节点、数据）{
var sourceNodes=data.ui.helper.data（“sourceNodes”），
事件=data.originalEvent，
copyMode=event.ctrlKey | | event.altKey；
如果（复制模式）{
$.each（源节点、函数（i、o）{
o、 copyTo（节点，data.hitMode，函数（n）{
删除n.key；
n、 所选=假；
n、 title=“副本”+n.标题；
});
});
}
}
}
});
$（“#加载树”）.hide（）；
$（“#cart ol”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
var节点=$（ui.helper）.data（“ftSourceNode”），
tree=node.tree，
copyMode=event.ctrlKey | | event.altKey，
sourceNodes=ui.helper.data（“sourceNodes”）；
如果（！copyMode）{
$.each（源节点、函数（i、o）{
o、 已选择（正确）；
});
}
$（this.find（“.placeholder”）.remove（）；
如果（sourceNodes.length>0）
$（“
”）.text（sourceNodes[0].title）.appendTo（this）；
},
结束：功能（事件、用户界面）{
var-obj=ui；
}
}).可排序({
项目：“li:非（.占位符）”，
连接到：“#fancytree”，
排序：函数（）{
//通过Dropable与sortable交互意外添加
//使用connectWithSortable修复了这一问题，但不允许您自定义活动/悬停类选项
$（this.removeClass（“ui状态默认”）；
}
});

 $("#tree").fancytree({
    extensions: ["dnd"],
    checkbox: true,
    selectMode: 3,
    //      debugLevel: 1,       
    activate: function (event, data) {
    },
    //lazyLoad: function (event, data) {
    //    data.result = { url: "ajax-sub2.json" }
    //},
    dnd: {
        preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
        preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
        autoExpandMS: 400,
        // focusOnClick: true,
        refreshPositions: true,
        draggable: {
            appendTo: "body",
            //  helper: "clone",
           //   connectToSortable: "#cart ol",
            // scroll: false,
            // containment: "parent",  // $("ul.fancytree-container"),
            // cursorAt: { left: 5 },
            revert: "invalid"
            // revert: function(dropped) {
            //   return
            // }
        },
        dragStart: function (node, data) {
            // allow dragging `node`:
            return true;
        },
        initHelper: function (node, data) {
            // Helper was just created: modify markup
            var helper = data.ui.helper,
                tree = node.tree,
                sourceNodes = [];

            //Store a list of active + all selected nodes
            if (!node.isSelected()) {
                sourceNodes.unshift(node);
            }
            helper.data("sourceNodes", sourceNodes);
            // Mark selected nodes also as drag source (active node is already)
            $(".fancytree-active,.fancytree-selected", tree.$container)
              .addClass("fancytree-drag-source");
            // Add a counter badge to helper if dragging more than one node
            if (sourceNodes.length > 1) {
                helper.append($("<span class='fancytree-childcounter'/>")
                  .text("+" + (sourceNodes.length - 1)));
            }
            // Prepare an indicator for copy-mode
            helper.prepend($("<span class='fancytree-dnd-modifier'/>")
              .text("+").hide());
        },

        dragDrop: function (node, data) {
            var sourceNodes = data.ui.helper.data("sourceNodes"),
                      event = data.originalEvent,
                      copyMode = event.ctrlKey || event.altKey;

            if (copyMode) {
                $.each(sourceNodes, function (i, o) {
                    o.copyTo(node, data.hitMode, function (n) {
                        delete n.key;
                        n.selected = false;
                        n.title = "Copy of " + n.title;
                    });
                });
            }
        }
    }
});
$("#LoadingTree").hide();



 $("#cart ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        var node = $(ui.helper).data("ftSourceNode"),
          tree = node.tree,
          copyMode = event.ctrlKey || event.altKey,
          sourceNodes = ui.helper.data("sourceNodes");

        if (!copyMode) {
            $.each(sourceNodes, function (i, o) {
                o.setSelected(true);
            });
        }
        $(this).find(".placeholder").remove();
        if (sourceNodes.length > 0)
            $("<li></li>").text(sourceNodes[0].title).appendTo(this);
    },
    over: function (event, ui) {
        var obj = ui;
    }
}).sortable({
    items: "li:not(.placeholder)",
    connectWith:"#fancytree",
    sort: function () {
        // gets added unintentionally by droppable interacting with sortable
        // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
        $(this).removeClass("ui-state-default");
    }
});