jsTree 3 and jQuery UI Droppable

[Andrew Porritt]

I'm trying to use jsTree 3 and jQuery UI Droppable to make the nodes in the tree droppable, but I'm not sure what the best way to make every node droppable is. The tree is constructed from JSON data like so:

$("#viewsList").jstree({

"core": {

"data": [rootView],

"themes":

{

"icons": true,

"dots": false,

"stripes": true

},

"check_callback": true

},

"plugins": ["dnd"]

});

And I was hoping to be able to make every node droppable by doing the following after the above:

var treeNodes = $("#viewsList").find(".jstree-node");

treeNodes.droppable({

accept: ".addConstraint",

drop: function(event, ui)

{

window.alert("Dropped");

}

});

However, when the jsTree is first created, only the top nodes are added to the DOM it seems. Child nodes don't become part of the DOM until their parents are opened, and I'm not sure what the best way to make those newly added children droppable is. Would I need to also add an event handler to open_node.jstree, then check if the child nodes were already droppable and if not then configure them? Or is there a way to access all the nodes at once even if they're not part of the DOM? Or maybe a callback that is called when each node is added to the DOM?

Thanks.

[Ivan Bozhanov]

If you want to use jquery UI - just do what you suspected is right - bind to the open_node.jstree event and bind to all nodes that you find inside the newly opened node, so something like on('open_node.jstree', function (e, data) { data.instance.get_node(data.node, true).find('li'); });
Or you could use the built in dnd plugin and listen for $(document).bind('dnd_stop.vakata', function (e, data) { });
If you want to drag a foreign element on a tree, pull the latest source and use:
        $('.dragme') // element you want to be able to drop on the tree
            .on('mousedown', function (e) {
                return $.vakata.dnd.start(e, { 'jstree' : true, 'obj' : $(this), 'nodes' : [{ id : true, text: $(this).text() }] }, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i>' + $(this).text() + '<ins class="jstree-copy" style="display:none;">+</ins></div>');
            });

Best regards,
Ivan

[Kari Pönkkö]

Hi,

I have one question about the dnd_stop event. How do I get the node where the user dropped the item? I'm dragging items from table to a treeview (jstree). 

Thanks,

Kari

[Ivan Bozhanov]

In dnd_stop you get a data object with the event - look for data.event - it is the original event (mouseup in most cases) - so look for data.event.target. I just added those events to the docs, they will be on the site in a few days (for now only on github).

[Kari Pönkkö]

I hacked my code so that when user drops something on the jstree I get the copy_node event. Then I save the node id to a variable and then use it at dnd_stop...maybe I'll have to change that :)

Thanks!