Search code examples
drag-and-dropjstreedraglocked

jsTree with dnd no dragged and locked nodes


I use jsTree library (ver. 3.1.1) with the dnd plugin.

In my tree i have two classes for no_dragging und locked. It means - no_dragging = the node can not dragged locked = dragged node can not place on this node

But i have no idea how can i say jstree this node is not for dragging oder locked. See the Code

$('#jstree1').jstree('destroy').jstree({
            'core' : {
                'check_callback' : true,
                'multiple' : false
            },
            "dnd": {
                'copy': false   
            },
            'plugins' : [ 'types', 'dnd' ],
            'types' : {
               //the types

            }
        });

        $(document)
        .on('dnd_start.vakata.jstree', function (e, data) {
            if($(data.element).closest('li').hasClass("no_dragging")){
                //no_dragging for this node
                //????
            }
        })
        .on('dnd_move.vakata', function (e, data) {
            var t = $(data.event.target);
            if(!t.closest('li').hasClass("locked")) {
              data.helper.find('.jstree-icon').removeClass('jstree-er').addClass('jstree-ok');
            }
            else {
              data.helper.find('.jstree-icon').removeClass('jstree-ok').addClass('jstree-er');
              //dont move the node in this node
              //???? 
            }

        })

Solution

  • Do not use the dnd_start event - it fires when you are already moving a node. If you want to prevent dragging use the is_draggable config option:

    is_draggable : function (nodes) {
        var i = 0, j = nodes.length;
        for(; i < j; i++) {
           if(this.get_node(nodes[i], true).hasClass('no_dragging')) {
               return false;
           }
        }
        return true;
    }
    

    Preventing a node from being dropped on a parent is another deal - use the core.check_callback config option as a function, which you have now set to true.

    check_callback : function (op, node, parent, position, more) {
        if((op === 'move_node' || op === 'copy_node') && parent.li_attr.class && parent.li_attr.class.indexOf('locked') !== -1) {
            return false;
        }
        return true;
    }
    

    Here is a fiddle: http://jsfiddle.net/DGAF4/512/