1

我有一个用一些 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
  • 花式树.min.css
4

4 回答 4

2

要防止在树容器内滚动：

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

和自定义 CSS

ul.fancytree-container {
    position: inherit;
}

为了使遏制工作：

$("#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;
      },
    },
  }
  [...]
});
于 2015-02-07T22:39:27.897 回答
1

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

希望这可以帮助。

于 2015-02-06T01:30:08.597 回答
0

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

ul.fancytree-container {
 overflow: visible;
}
于 2014-08-11T09:46:46.383 回答
0

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

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

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

...代替...

$("ul.fancytree-container", node.tree.$div).append($helper);
于 2014-11-04T15:45:08.773 回答