Javascript 将fancytree节点拖动到外部可拖放位置

我有一个用json填充的fancytree。我还有一个可拖放div。我希望能够在树中拖动节点（即在包含的层次结构中移动内容），并且能够将内容从树中拖到外部可拖放div中

我该怎么做？

以下是我所拥有的：

我的html:

<div id="tree"></div>
<div id="droppable">
stuff
</div>  

{
                    autoExpandMS: 400,
                    focusOnClick: true,
                    preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
                    preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
                    dragStart: function(node, data) {return true;},
                    dragEnter: function(node, data) {return true;},
                    dragDrop: function(node, data) {data.otherNode.moveTo(node, data.hitMode);},
                                draggable: {
                    containment: 'document',
                    scroll : false,
                    scrollSpeed: 7,
                    scrollSensitivity: 10,
                }
                },

可拖放初始化

$('#droppable').droppable({
    onDrop  : function(e,source){
        alert('dropped: '+source.textContent);  
        window.dropped = source;
        window.event   = e;
    },
});

扩展名：

<div id="tree"></div>
<div id="droppable">
stuff
</div>  

{
                    autoExpandMS: 400,
                    focusOnClick: true,
                    preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
                    preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
                    dragStart: function(node, data) {return true;},
                    dragEnter: function(node, data) {return true;},
                    dragDrop: function(node, data) {data.otherNode.moveTo(node, data.hitMode);},
                                draggable: {
                    containment: 'document',
                    scroll : false,
                    scrollSpeed: 7,
                    scrollSensitivity: 10,
                }
                },

我正在使用[“dnd”、“edit”、“contextMenu”]扩展。我提到这一点是为了防止我不知道有什么冲突。。。但是，我确实禁用了编辑和上下文菜单，但没有任何效果

行为：

<div id="tree"></div>
<div id="droppable">
stuff
</div>  

{
                    autoExpandMS: 400,
                    focusOnClick: true,
                    preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
                    preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
                    dragStart: function(node, data) {return true;},
                    dragEnter: function(node, data) {return true;},
                    dragDrop: function(node, data) {data.otherNode.moveTo(node, data.hitMode);},
                                draggable: {
                    containment: 'document',
                    scroll : false,
                    scrollSpeed: 7,
                    scrollSensitivity: 10,
                }
                },

• contextMenu和edit extensions工作正常
• 我可以在树中拖放项目以重新排列节点
• 我不能把东西从树上拖出来
  • 使用

    scroll:true

    时，当我在边缘拖动时，树只会得到一些滚动条，滚动到无穷远
  • 使用

    scroll:false

    时，树滚动条的行为相同，但不会发生实际的滚动
  • 遏制似乎没有效果

包含的资源：

<div id="tree"></div>
<div id="droppable">
stuff
</div>  

{
                    autoExpandMS: 400,
                    focusOnClick: true,
                    preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
                    preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
                    dragStart: function(node, data) {return true;},
                    dragEnter: function(node, data) {return true;},
                    dragDrop: function(node, data) {data.otherNode.moveTo(node, data.hitMode);},
                                draggable: {
                    containment: 'document',
                    scroll : false,
                    scrollSpeed: 7,
                    scrollSensitivity: 10,
                }
                },

• jquery.js jquery-ui-1.11.0.js
• jquery.fancytree-all.css
• jquery.contextMenu.css
• jquery.contextMenu-1.6.5.js
• jquery.fancytree.contextMenu.js
• fancytree.min.css

---

我在将元素从树中拖出时也遇到了同样的问题，并最终对fancytree容器元素进行了一些快速css攻击：

ul.fancytree-container {
 overflow: visible;
}

---

问题是FancyTree使用它自己的可拖动辅助对象，该辅助对象附加到树元素。请参见jquery.fancytree.dnd.js（第389行）中的_onDragEvent

我破解了代码，将助手附加到身体上，从而绕过了这个问题

$("body").append($helper);

…而不是

$("ul.fancytree-container", node.tree.$div).append($helper);

---

可以在fancytree源代码的tests目录下找到一个例子，它做了完全相同的事情。请看这里：

希望这有帮助。

和自定义CSS

ul.fancytree-container {
    position: inherit;
}

$（“#树”）.fancytree({
dnd：{
...
可拖动：{
回复：“无效”
卷轴：错，
appendTo:“body”//Helper parent（默认为tree.$container）
助手：函数（事件）{
var$helper，
sourceNode=$.ui.fancytree.getNode（event.target），
$nodeTag=$（sourceNode.span）；
$helper=$（“”）
.append（$nodeTag.find（“span.fancytree title”）.clone（））；
//将节点引用附着到辅助对象
$helper.data（“ftSourceNode”，sourceNode）；
//我们返回一个未连接的元素，因此'draggable'将添加此元素
//指定为'appendTo'选项的父级
返回$helper；
},
},
}
[...]
});

请创建您的代码！