javascript - 将 fancytree 节点拖到外部 droppable

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