带有 dnd 的 jsTree 没有拖动和锁定的节点

Question

我将 jsTree 库（版本 3.1.1）与 dnd 插件一起使用。

在我的树中，我有两个类 no_dragging 未锁定。它的意思是 - no_dragging = 节点不可拖动 locked = 拖动的节点不能放在这个节点上

但是我不知道我怎么能说jstree这个节点不是用来拖动oder的呢。查看代码

$('#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
              //???? 
            }

        })

Answer 1

不要使用 dnd_start 事件 - 它会在您已经移动节点时触发。如果要防止拖动，请使用 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;
}

防止节点被父节点删除是另一回事 - 使用 core.check_callback 配置选项作为一个函数，您现在已将其设置为 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;
}

这是一个fiddle： http://jsfiddle.net/DGAF4/512/

带有 dnd 的 jsTree 没有拖动和锁定的节点

jsTree with dnd no dragged and locked nodes

drag-and-drop

locked

drag

jstree