V3 DND. Drag and drop callback "move_node.jstree" - how to get the node relative to which the dragged node is dropped

[Temuri Imnaishvili]

Hi Ivan,

I'm having a bit of unexpected problem with DND handler 'move_node.jstree'.

On the backend I am syncing visual tree UI with database state. Below is how I move the nodes with my nested set class (a PEAR port, not the best):

$tree->moveTree($nodeBeingMoved, $targetNode, $position); // $position is first|last|after|before

You see that $position is not a Nth child of $targetNode, rather an indication where to move $nodeBeingMoved in relation to $targetNode.

That means I have to know the target node in 'move_node.jstree', which is not a problem:

data.instance.get_node(data.parent).children[data.position] - will return the node of data.parent indicated by data.position.

Now, the problem is that when you return the position, the node that was dragged, is already present in new parent's children node collection.

I.e. I need to know the ID of the node at that position BEFORE the node was dropped.

Do you have any suggestion?

Thank you!

[Ivan Bozhanov]

Store it in a variable which check_callback occurs:

var tmp = { node : null, pos : null };
...
check_callback : function (op, node, parent, position, more) {
  if((op === "move_node" || op === "copy_node") && more && more.dnd) { tmp.node = more.ref; tmp.pos = more.pos;  }
  ...
}
..
.on("move_node.jstree copy_node.jstree", function () { /* use tmp in your sync call */ })

Best regards,
Ivan

[Temuri Imnaishvili]

Thank you for being so wonderfully supportive.

I hope my modest donation that I've just made will help you keep going!

Cheers,

Temuri

[Ivan Bozhanov]

Thank you very much - your help is really appreciated!

Cheers,
Ivan

[David Leffler]

As a note to 'fill in the blanks' base on my successful implementation...

• tmp.node is a full node object of the target
• tmp.pos is the type of (nested node) move, one of:
• 'b' - addBefore
• 'a' - addAfter
• 'i' - append

Dave

[Ashish Patel]

Hello Ivan Bozhanov,

Whenever I drag and drop I want whole information for Drag node and need information for parent node on the Drag node will be drop.

In this Image first time i am drag to drop Hp node from once tree to another at that time i want hp drag node info and another side plan tree so there is no parent node.

second time i am drag lenevo from once js tree to another at that time i want lenevo node i mean drag information as well as i am gonna drop in HP node so I want HP parent node information.

How can i got this information??

yes i am using check_callback function here is below code :

"check_callback" :  function (op, node, par, pos, more) {

console.log("more:  " +JSON.stringify(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;

}

and another HTML side i am using jquery for DND 

<script>

    $(function () {

        $('#plugins4').jstree({

            'plugins': [ 'crrm']

        });

        $('.drag')

            .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() + '</div>');

            });

        $(document)

            .on('dnd_move.vakata', function (e, data) {

                var t = $(data.event.target);

                if(!t.closest('.jstree').length) {

                    if(t.closest('.drop').length) {

                        data.helper.find('.jstree-icon').removeClass('jstree-er').addClass('jstree-ok');

                    }

                    else {

                        data.helper.find('.jstree-icon').removeClass('jstree-ok').addClass('jstree-er');

                    }

                }

            })

            .on('dnd_stop.vakata', function (e, data) {

$('#plugins4').jstree(true).refresh();

                var t = $(data.event.target);

if(!t.closest('.jstree').length) {

                    if(t.closest('.drop').length) {

                        $(data.element).clone().appendTo(t.closest('.drop'));

                        // node data: 

                        if(data.data.jstree && data.data.origin){

console.log(data.data.origin.get_node(data.element));

}

                    }

                }

            });

  });

</script>

plugins4 is the left side Jstree div ID.