drag fancytree node to an external droppable

Question

I have a fancytree populated with some json. I also have a droppable div. I want to be able to drag nodes within the tree (ie to move stuff about within the contained hierarchy) and I want to be able to drag stuff from the tree into my external droppable div.

How can I do this?

Here's what I have:

My html:

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

dnd initialisation options:

{
                    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 initialisation

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

Extensions:

I'm making use of ["dnd","edit","contextMenu"] extensions. I'm mentioning this in case there is some conflict I am not aware of... I did however disable the edit and contextMenu to no avail.

Behavior:

• The contextMenu and edit extensions work fine.
• I can drag and drop items within the tree to reorder nodes.
• I cannot drag stuff out of the tree
  • with scroll: true the tree just gets some scrollbars that scroll to infinity as I drag over the edge
  • with scroll: false the tree scrollbars behave the same but no actual scrolling occurs
  • containment seems to have no effect

Included resources:

• 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
      },

and custom 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

There is an example that can be found under the tests directory of the fancytree source that does the exact same thing. Take a look at it here: http://wwwendt.de/tech/fancytree/test/test-ext-dnd.html

Hope this helps.

Answer 3

I have faced the same issue with dragging elements out of the tree and ended up with some quick css hack for fancytree-container element:

ul.fancytree-container {
 overflow: visible;
}

Answer 4

The problem is that FancyTree uses its own draggable helper which is attached to the tree element. See _onDragEvent in jquery.fancytree.dnd.js (line 389).

I got round this by hacking the code to append the helper to the body i.e.

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

...instead of...

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