当前位置 : 主页 > 手机开发 > 无线 >

jsTree禁用移动某些节点

来源:互联网 收集:自由互联 发布时间:2021-06-10
我有一个jsTree,我希望它的一些节点是可移动的.无法移动根节点及其直接子节点. 我正在使用crrm并且它按预期工作但它仍然允许我拖动所有节点,甚至那些无法在任何地方丢弃的节点(紧接
我有一个jsTree,我希望它的一些节点是可移动的.无法移动根节点及其直接子节点.

我正在使用crrm并且它按预期工作但它仍然允许我拖动所有节点,甚至那些无法在任何地方丢弃的节点(紧接在根之下).我根本不希望它们是可拖动的,即用户根本不能拾取它们.

在当前版本的jsTree(3.0.8)中,您执行此操作:

$('#my_jstree')
            .jstree({
                "core" : {
                    "check_callback" : true
                },
                "dnd" : {
                    "is_draggable" : function(node) {
                        console.log('is_draggable called: ', node[0]);
                        if (node[0].type != 'MY-DRAGGABLE-TYPE') {
                            alert('this type is not draggable');
                            return false;
                        }
                        return true;
                    }
                },
                "types" : {
                    "default" : {
                        "icon" : "glyphicon glyphicon-flash"
                    },
                    "MY-DRAGGABLE-TYPE" : {
                        "icon" : "glyphicon glyphicon-info-sign"
                    }
                },
                "plugins" : [ "dnd", "types" ]})

使用is_draggable函数和类型插件来控制可以拖动的内容.如果你想看到我使用的图标包括bootstrap的glyphicons样式表.这里的代码假设您已经在HTML中拥有了jstree的div和列表.如果有人不能理解上面的代码,我会发布一个plunkr.

编辑 – 防止丢弃这样做:

"core" : {
                    "check_callback" : function(operation, node, node_parent, node_position, more) {
                        if (operation == 'move_node') {
                            console.log(node_parent);
                            if (node_parent.type == 'MY-DROPPABLE-TYPE') {
                                return true
                            } else
                                return false;
                        }
                    }
                },

使用check_callback函数来筛选droppable的类型.使用node_parent获取droppable.

网友评论