将 fancytree 节点拖到外部 droppable答案

【问题标题】：drag fancytree node to an external droppable将 fancytree 节点拖到外部 droppable
【发布时间】：2014-06-30 11:09:20
【问题描述】：

我有一个花式树，里面有一些 json。我也有一个可放置的 div。我希望能够在树中拖动节点（即在包含的层次结构中移动内容），并且我希望能够将内容从树中拖到我的外部可放置 div 中。

我该怎么做？

这是我所拥有的：

我的html：

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

dnd 初始化选项：

{
                    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;
    },
});

扩展：

我正在使用 ["dnd","edit","contextMenu"] 扩展。如果有一些我不知道的冲突，我会提到这一点......但是我确实禁用了编辑和 contextMenu 无济于事。

行为：

contextMenu 和编辑扩展工作正常。
我可以在树中拖放项目以重新排序节点。
我无法将东西拖出树
- 使用scroll: true，当我在边缘拖动时，树会滚动到无限远
- 使用scroll: false，树滚动条的行为相同，但不会发生实际滚动
- 收容似乎没有效果

包含的资源：

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

【问题讨论】：

请为您的代码创建一个小提琴！

标签： javascript jquery jquery-ui drag-and-drop fancytree

【解决方案1】：

To prevent scrolling inside the tree container:

$("#tree").fancytree({
   ...  
   dnd: {
      ...
      draggable: {
         scroll: false
      },

和自定义 CSS

ul.fancytree-container {
    position: inherit;
}

To make containment work:

$("#tree").fancytree({
  dnd: {
    ...
    draggable: {
      revert: "invalid"
      scroll: false,
      appendTo: "body", // Helper parent (defaults to tree.$container)
      helper: function(event) {
        var $helper,
          sourceNode = $.ui.fancytree.getNode(event.target),
          $nodeTag = $(sourceNode.span);

        $helper = $("<div class='fancytree-drag-helper'><span class='fancytree-drag-helper-img' /></div>")
          .append($nodeTag.find("span.fancytree-title").clone());

        // Attach node reference to helper object
        $helper.data("ftSourceNode", sourceNode);
        // we return an unconnected element, so `draggable` will add this
        // to the parent specified as `appendTo` option
        return $helper;
      },
    },
  }
  [...]
});

【讨论】：

【解决方案2】：

在 fancytree 源代码的 tests 目录下可以找到一个示例，该示例执行完全相同的操作。看看这里：http://wwwendt.de/tech/fancytree/test/test-ext-dnd.html

希望这会有所帮助。

【讨论】：

【解决方案3】：

我在将元素拖出树时也遇到了同样的问题，最后我对 fancytree-container 元素进行了一些快速的 css hack：

ul.fancytree-container {
 overflow: visible;
}

【讨论】：

【解决方案4】：

问题在于 FancyTree 使用自己的可拖动助手，该助手附加到树元素。请参阅 jquery.fancytree.dnd.js 中的 _onDragEvent（第 389 行）。

我通过破解代码将助手附加到正文中解决了这个问题，即

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

...而不是...

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

【讨论】：