I have 2 jstrees and now I am trying to implement a drag and drop option between them, but I can't seem to manage to obtain the id's of the element i am dragging or the new parent's id (after drag and drop). Until now this is the code I created, but in the data that i alert there are no ids or any other info that would help me.

$("#tree").jstree({


   "dnd" : {

        "drop_finish" : function(data) {
            alert(data.toSource());
        }
       },
   "plugins" : [ "themes", "html_data", "dnd", "ui", "types" ],
});

I have also created a working Fiddle with 2 trees and pretty much all my code.

If anyone could give me a hint or an idea about how could I solve this problem, I would greatly appreciate it.

I have 2 jstrees and now I am trying to implement a drag and drop option between them, but I can't seem to manage to obtain the id's of the element i am dragging or the new parent's id (after drag and drop). Until now this is the code I created, but in the data that i alert there are no ids or any other info that would help me.

$("#tree").jstree({


   "dnd" : {

        "drop_finish" : function(data) {
            alert(data.toSource());
        }
       },
   "plugins" : [ "themes", "html_data", "dnd", "ui", "types" ],
});

I have also created a working Fiddle with 2 trees and pretty much all my code.

If anyone could give me a hint or an idea about how could I solve this problem, I would greatly appreciate it.

• javascript
• jquery
• drag-and-drop
• jstree

4 Answers 4

Try this

$("#tree").bind('move_node.jstree', function(e, data) {
    alert(data.node.id);
    alert(data.parent);
    alert(data.old_parent);
    alert(data.position);
}

Theese variables are pretty much self-explanatory.

Don't use "dnd", let try "crrm" like this.

"crrm": {
        "move": {
            "always_copy": "multitree",//create a copy node,prevent removing node
            check_move: function(m) {
                // use m.ot,m.rt to get the id of the node you are dragging or the node you will drop down.
            }
            ,"default_position": "last"
        }
    },

Please read jstree documentation before. I had spent more time to learn it.So try to read the documentation,all of you want is in it.

You can use this,

"check_callback" :  function (op, node, par, pos, more) {
    if ((op === "move_node" || op === "copy_node") && node.type && node.type == "root") {
        return false;
    }
    if ((op === "move_node" || op === "copy_node") && more && more.core && !confirm('Are you sure ...')) {
        return false;
    }
    return true;
},

use this:

$(document).bind("dnd_stop.vakata", function(e, data) {

});