CODEWITHSUNDEEP
javascriptjqueryjstreejstree-dnd
Alex Carter
Alex Carter

Reputation: 75

JSTree Prevent drag from class

Afternoon, I am having a few issues with JSTree 3.0. What I would like to do is on the load of the page prevent all nodes from being dragged using the dnd plugin. I then want to be able to click an edit button to enable the drag and drop functionality on all nodes. I think the best way to achieve this would be to set a class on all nodes and prevent the drag if it contains this class. When the edit is clicked the class is removed.

I have found a way to get the class of the node on move_node using data.node.li_attr.class. This returns the class but I cannot work out how to stop the drag operation. Please see the below code so far:

$tree.on("move_node.jstree", function(e, data){
            var NodeClass = data.node.li_attr.class;
            if(NodeClass == "noMove")
            {
                $.jstree.defaults.dnd_is_draggable(false);
            }else{
                $tree.jstree("open_all");
                var nodeId = data.node.id;
                var nodeParent = data.parent;
                var level = data.node.parents.length;
                getChildren(data.node.id, level);
                var url = window.location.origin + window.location.pathname.replace(regexp, "/ajaxSaveCaseFamily");

                $.ajax({
                    type:"POST",
                    url:url,
                    data:{
                        "_token":token,
                        "nodeId":nodeId,
                        "nodeParent":nodeParent,
                        "depth":level
                    },
                    success:function(data){
                        var query = data;
                        if(query.RESULT == "FAIL"){
                            $("#errMsg").html(query.REASON);
                        }
                    }
                })
            }
        });

Any help would be greatly appreciated!

Thanks in advance!!

Upvotes: 0

Views: 1254

Answers (1)

vakata
vakata

Reputation: 3886

You are approaching this wrong - when the event is triggered the drag has already begun - there is a function that gets called to determine if nodes are draggable (even before dragging has started):
http://www.jstree.com/api/#/?q=is_dra&f=$.jstree.defaults.dnd.is_draggable

Here is an example on how to use it:

var is_dragging_allowed = false;
$('#edit_button').on('click', function () {
  is_dragging_allowed = true;
});
$('#tree').jstree({
  dnd : {
    is_draggable : function () {
      return is_dragging_allowed;
    }, ...

Upvotes: 1

Related Questions