CODEWITHSUNDEEP
javascriptjqueryfancytree
Andreas Zeiner
Andreas Zeiner

Reputation: 587

Drag & Drop between two Fancetrees

Is there a way to combine 2 Fancytrees in a way that Fancytree A is a fixed set of configuration items, Fancytree B is a configuration file and items from Fancytree A can be drag & dropped to Fancytree B without disappearing in Tree A. Within Fancytree B drag & drop should also be possible.

I've searched for a while now but haven't found exactly what i was looking for, so maybe somebody knows a way how to do that!

Upvotes: 2

Views: 1036

Answers (1)

mar10
mar10

Reputation: 14834

It is definitely possible using the standard functionality to drag/drop nodes from a different tree or even standard jQuery Draggables.

Basically you use the same API

        $("#tree").fancytree({
            extensions: ["dnd"],
            ...
            dnd: {
                ...
                dragStart: function(node, data) {
                    if( data.originalEvent.shiftKey ){
                        console.log("dragStart with SHIFT");
                    }
                    // allow dragging `node`:
                    return true;
                },
                dragEnter: function(node, data) {
                    // Prevent dropping a parent below another parent (only sort
                    // nodes under the same parent)
/*                  if(node.parent !== data.otherNode.parent){
                        return false;
                    }
                    // Don't allow dropping *over* a node (would create a child)
                    return ["before", "after"];
*/
                   return true;
                },
                dragDrop: function(node, data) {
                    if( !data.otherNode ){
                        // It's a non-tree draggable
                        var title = $(data.draggable.element).text() + " (" + (count)++ + ")";
                        node.addNode({title: title}, data.hitMode);
                        return;
                    }
                    data.otherNode.moveTo(node, data.hitMode);
                }
            }
        });

The example browser contains a demo under Examples - Test - Drag'n'Drop

Upvotes: 1

Related Questions