dnd,如何限制删除某些节点类型?

Ale*_*lex 23 jstree

我有37种不同的节点类型.我正在尝试实现拖放.这有效但我需要确切地限制可以拖动哪些类型以及可以删除它们的位置.遗憾的是,我在文档中找不到任何有用的信息(http://www.jstree.com/documentation).

到目前为止,我尝试了三种方法:

first:根据节点类型在drag_check回调中定义true或false的返回值:

$("#demo1").jstree({
    "dnd" : {
        "drag_check" : function () {
Run Code Online (Sandbox Code Playgroud)

第二种:绑定到prepare_move.jstree事件并根据节点类型返回true或false值:

.bind("prepare_move.jstree", function (e, data) {
   if (data.rslt.o.attr("typ") === "tpop") {
Run Code Online (Sandbox Code Playgroud)

第三:使用类型插件并在那里定义有效的子代:

$("#tree").jstree( {
    "types": {
        "type_attr": "typ",
        "valid_children": ["ap_ordner_pop", "ap_ordner_apziel", "ap_ordner_erfkrit", "ap_ordner_apber", "ap_ordner_ber", "ap_ordner_beob", "iballg", "ap_ordner_ibb", "ap_ordner_ibartenassoz"],
        "types": {
        "ap_ordner_pop": {
            "valid_children": "pop"
        },
        "pop": {
            "valid_children": ["pop_ordner_tpop", "pop_ordner_popber", "pop_ordner_massnber"],
            "new_node": "neue Population"
        },
        "pop_ordner_tpop": {
            "valid_children": "tpop"
        }
Run Code Online (Sandbox Code Playgroud)

但我几乎可以在任何地方丢弃大多数节点.怎么办呢?或者你能指出一个很好的例子吗?

非常感谢帮助.

小智 52

对于那些使用jstree v3寻找答案的人.crrm插件已被删除,相反,您将需要使用' check_callback '.

在我的情况下,所有我想做的事是被拖着停止子项其他子项.可能有更好的方法来做到这一点,但经过几个小小的进步,这对我有用.

我相信你还需要将'check_while_dragging'dnd选项设置为true,以便在拖动时触发'check_callback'.

这是我的jsTree初始化:

$("#jsTree").jstree({
            'core': {
                'data': window.treeData,
                'themes': {
                    'icons': false
                },
                'check_callback': function(operation, node, node_parent, node_position, more) {
                    // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
                    // in case of 'rename_node' node_position is filled with the new node name

                    if (operation === "move_node") {
                        return node_parent.original.type === "Parent"; //only allow dropping inside nodes of type 'Parent'
                    }
                    return true;  //allow all other operations
                }
            },
            "state": { "key": "<%=Request.QueryString["type"]%>_infotree" },
            "dnd": {
                check_while_dragging: true
            },
            "plugins": ["state", "dnd", "types"]
        })
Run Code Online (Sandbox Code Playgroud)

  • 这不像我预期的那样完成.当我从回调中返回false时,它确实阻止将源项添加到父项.但是,我曾期望在目标节点上方悬停时看到"红色X",表示不允许这样做.取而代之的是我看到一个绿色的复选标记,这使我看起来可以拖放到目标上,当我放下它时没有任何反应.不想花太多时间在上面,我只是添加了一个警告,当事件发生时"不允许拖放到此节点上". (2认同)

MMe*_*eah 12

在目标上,您需要检查是否允许您将对象放在那里.看起来你有一些机制来嗅闻对象,如你所示:

 if (data.rslt.o.attr("typ") === "tpop")
Run Code Online (Sandbox Code Playgroud)

非常好.在执行多树操作时,使用该技术区分一种对象类型与另一种对象类型.在下面的例子中,我使用源和目标中的类名来进行我自己独特的"气味测试".不要复制和粘贴,否则你会感到困惑.您需要使用自己的测试类型来接受/拒绝从一棵树拖放到另一棵树.我的所有测试都在crrm check_move函数中完成.

.jstree({
 "crrm" : {
    input_width_limit : 200,
    move : {
        always_copy     : "multitree", // false, true or "multitree"
        open_onmove     : false,
        default_position: "last",
        check_move      : function (m) { 
                            if(!m.np.hasClass("someClassInTarget")) return false;
                            if(!m.o.hasClass("someClassInSource")) return false;
                            return true;
                          }
    }
 },
 "dnd" : {
    copy_modifier   : $.noop,
    drop_target     : ".someWrapperClassInSource",
    drop_check      : function (data) { return true; },
    drop_finish     : function (data) {
                            $.jstree._reference(this.get_container()).remove($(data.o));
                      },
    drag_target     : ".someClassInSource",
    drag_finish     : function (data) {;},
    drag_check      : function (data) { return { after : false, before : false, inside : true }; }
 },
Run Code Online (Sandbox Code Playgroud)