CODEWITHSUNDEEP
javascriptdrag-and-dropjstree
eagor
eagor

Reputation: 10035

JsTree v3.0 drag and drop plugin. Reference target node upon dropping

I use drag and drop plugin of jsTree library (ver. 3.0) With the following code I can bind to the end of drag'n'drop action, but I can not see a way to get the reference to the target node (the node I'm dropping on).

$(document).on('dnd_stop.vakata', function(e, data) {
   // how to get target_node here?
});

Upvotes: 7

Views: 11907

Answers (8)

ort
ort

Reputation: 1

Bind the listener after document is ready:

$(document).ready(function() {
    $(document).on('dnd_stop.vakata', function (e, data) {
        let ref = $.jstree.reference("#jstree");
        let nodes = data.data.nodes.map(node_id => ref.get_node(node_id));
        let parent_node_id = nodes[0].parent;
        let parent = ref.get_node(parent_node_id);
    });
});

jstree has an internal listener for dnd_stop.vakata.jstree that performs the ui logic. It's setup inside a $(function() {...}) i.e. when the document is ready. If you bind your custom function before jstree, you get the parent before the ui logic is executed.

Upvotes: 0

bluestart83
bluestart83

Reputation: 337

you just need to call:

'check_callback': function(operation, node, node_parent, node_position, more) {
  // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'

  if (operation === "move_node") {
      var node = more.origin.get_node('fiche-1');
      return true;
  }

  return true; //allow all other operations
}

Upvotes: 0

Ashok Dhakhada
Ashok Dhakhada

Reputation: 425

$(document).on('dnd_stop.vakata', function(e, data) {
    var inst = $.jstree.reference('#jstree');
    console.log("END DROP:");
    var sourceID = data.data.nodes[0];
    console.log("Source ID: " + sourceID);
    var targetNode = inst.get_node(data.event.target, true);
    var targetID = targetNode[0].id;
    console.log("Target ID: " + targetID);
});

Upvotes: 1

mbadeveloper
mbadeveloper

Reputation: 1270

To get the target node you use the dnd_stop.vakata event. Once you get the node you can access to the different properties like id:

$(document).bind("dnd_stop.vakata",function(e, data) {
    var targetNode = $('#jstree').jstree(true).get_node($(data.event.target));
    var nodeId = targetNode.id;
});

Upvotes: 0

heymega
heymega

Reputation: 9401

If you need to do this via the check_callback then you can access the target node via the more parameter.

'check_callback': function(operation, node, node_parent, node_position, more) {


    // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
    // in case of 'rename_node' node_position is filled with the new node name


    if (operation === "move_node") {

        if (more.ref.data.type === "folder") {

            return true;

        } 

    }

    return false; //allow all other operations

}

Upvotes: 0

stacked
stacked

Reputation: 287

Another solution is to use the get_node() function on the jstree object.

$(document).on('dnd_stop.vakata', function (e, data) {
    ref = $('#jstree').jstree(true);
    parents = ref.get_node(data.element).parent;
});

You can get all parents with:

    all_parents = ref.get_node(data.element).parents;

Upvotes: 6

ralondo
ralondo

Reputation: 23

I had the same problem and had to get the ID within the dnd_stop event, so I came up with this:

$(document).on('dnd_stop.vakata', function(e, data) {
  var t = $(data.event.target);
  var targetnode = t.closest('.jstree-node');
  var nodeID = targetnode.attr("id");
});

That way I can get the ID of the targetnode, for example.

Upvotes: 2

kuba1999
kuba1999

Reputation: 519

I had same problem. I found other solution than event dnd_stop.vakata, which returns old data before changed position.

This works:

$('#jstree_demo_div').on("move_node.jstree", function (e, data) {
   //data.node, data.parent, data.old_parent is what you need

   //console.log(data);
   alert(data.node.id);
   alert(data.parent);
});

Upvotes: 5

Related Questions