Question

我有一个fancytree填充了一些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

Answer 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;
      },
    },
  }
  [...]
});

Answer 2

有一个例子可以在fancytree源的tests目录下找到完全相同的东西。请在此处查看：http://wwwendt.de/tech/fancytree/test/test-ext-dnd.html

希望这有帮助。

Answer 3

我遇到了从树中拖出元素的同样问题，并最终为fancytree-container元素提供了一些快速的css hack：

ul.fancytree-container {
 overflow: visible;
}

Answer 4

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

我通过破解代码将助手附加到身体上来解决这个问题，即

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

......而不是......

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

将fancytree节点拖到外部droppable

4 个答案: