Drag'n' Drop Confirmation after dropping a node with cancel function

[bernhard...@troii.com]

Hello guys,

is there a possibility to Cancel a Drag'n'Drop event after drop down a node?

I want to open a jquery Popup if you drop the node and then if you press the "Cancel" button the current move event should be stopped.

->  kind of confirmation to the current move.

I read something about it in other posts, but I did not found a solution to this.

I found out that there is the possibility to stop the move_node by returning false in the jstree.js, but I do not want to include my confirmation into the jstree.js

[Ivan Bozhanov]

The only way to achieve this (a jQuery popup) is to open the popup after move_node (or copy_node) completes (so in the move_node.jstree / copy_node.jstree events) and if the user presses cancel - revert the node to its original position.
If you persist the tree to a server it is easier - open the popup - if the user confirms - persist the change (no need to do anything more client side), if the user presses cancel - do not persist to the server and only ".refresh()" your tree (and the node will be reverted to its original position, since it was not persisted).

Best regards,
Ivan

[bernhard...@troii.com]

Thanks a lot for your answer.

I will try it. The connection to a server exists, so this would be no problem.

It might be not the best solution, but it is a solution. :)

Bernhard

[Anatoly Meshkov]

Hi guys,

I found the following solution to cancel move node operation and it works for me (jstree-3.0.4-0-gaa240c1):

$(function(){
 
   //jstree configuration
   //.....................
        var oldParent = 0;
        var newParent = 0;
        var oldPosition = 0;
        var newPosition = 0;

        $(document).on('dnd_start.vakata', function (e, data) {
            selector = "li#"+ data.data.nodes[0] +".jstree-node";
            oldParent = $('#moptions-tree').jstree(true).get_node(data.data.nodes[0]).parent;
            oldPosition = $(selector).index();
        });

        $(document).on('dnd_stop.vakata', function (e, data) {
            node = data.data.origin.get_node(data.data.nodes[0])
            if (node.type == "root") return false;

            if (!confirm("Are you sure you want to move this Menu Option?"))
            {
                $('#moptions-tree').jstree(true).move_node(node,oldParent,oldPosition);
                return false;
            }
            selector = "li#"+ data.data.nodes[0] +".jstree-node";
            newPosition =  $(selector).index();
            newParent = node.parent;
           
            //other code.....................
        });
});

BR,
Anatoly

[Ivan Bozhanov]

If you are using "confirm" simply use check_callback, no need to fiddle with the more internal dnd events and have a few moves back and forth. It is as simple as:
check_callback : function (op, node, par, pos, more) {
  if(op === "move_node" && more && more.core && !confirm('Are you sure ...')) {
    return false;
  }
  return true;
}

Best regards,
Ivan

[Anatoly Meshkov]

Hi Ivan,

Thanks for the reply and good solution.
But i need to tetermine old parent and old position for the moved node (to send request and make reordering in the DB)
Can you advice, how to get this parameters if check_callback is used?

BR,
Anatoly

[Ivan Bozhanov]

Since you are preventing the move why do you need to change anything on DB level? The move is prevented - there is nothing that you need to sync.
If the move is not prevented, the place to react is in a move_node.jstree event handler - take a look at the demos on jstree.com

Best regards,
Ivan

[Anatoly Meshkov]

Hi Ivan

If i'll use move_node.jstree event handler and server return error, how i can move the node to the old position? I can't use move_node method to prevent the loop, and i do't want reload whole tree.

BR,
Anatoly

[Ivan Bozhanov]

In case of a server error it would be wise to issue a .refresh(), since a server error may indicate the user tree is out of sync already. Anyway, that is external to jstree, if your way meets the requirements you have that is great :) If something works the way it should, don,t modify it :)