将节点从 jstree 拖到外部 div 元素上，然后在放下时执行操作

Question

我已经有一个 jstree 正在工作，现在希望能够将某些类型的节点拖动到外部 div 元素（包含由 highcharts 生成的图表）。我实际上并不希望从树中删除该节点，也不想要该节点的副本。我只是想要删除节点的操作来使用节点的 ID 更新图表。

我想我可以解决图表更新的问题，但这是使用 jstree 拖/放的过程，我发现有点令人困惑。另外，我只希望某些类型的节点可拖动（任何具有 rel="ds" 属性的节点）。

我对此很挣扎，但还没有走得太远。这就是我必须要做的：

$("#statstree").jstree({ 
       "json_data" : {
                "ajax" : {
                    "url" : "test.json",
                    "data" : function (n) { 
                        return { id : n.attr ? n.attr("id") : 0 }; 
                    },
                    "progressive_render" : true
                }
            },
            "types" : {
                "valid_children" : [ "root" ],
                "types" : {
                    "folder" : {
                        "icon" : { 
                            "image" : "images/folder.png" 
                        },
                        "valid_children" : [ "default" ],
                        //"max_depth" : 2,
                        "hover_node" : true,
                        "show_checkboxes" : false
                    },
                    "default" : {
                        "icon" : { 
                            "image" : "images/folder.png"
                        },
                        "valid_children" : [ "default" ]
                    },
                    "hover_node" : false
                }
            },
            "themes" : {
                "theme" : "classic",
                "dots" : false,
                "icons" : true
            },
            "core" : { "html_titles" : true },

            "dnd" : {
                "drop_target" : "#test_area",
                "drop_finish" : function (data) {
                    if(data.o.attr("rel") === "ds") {
                      //update chart with new data here?
                      //using data.o.attr("id")
                    }
                }
            },
            "crrm" : { move : { check_move : function (m) { return false; } } },

            "plugins" : ["themes","json_data","dnd","ui","types","crrm"]
        });

我在某处读到绑定“before.jstree”事件可以帮助阻止某些节点被拖动（还有 crrm 位）。但我认为我做错了。看来“start_drag”无权访问 data.args[0]：

$("#statstree").bind("before.jstree", function (e, data) {
            if(data.func === "start_drag" && data.args[0].parent("li").attr("rel") != "ds") {
                e.stopImmediatePropagation();
                return false;
            }
        });

有人知道我如何完成此任务吗？

干杯:)

编辑：我已经想出了如何阻止非“ds”节点被丢弃在该区域：

"drag_check" : function (data) {
                    if(data.r.attr("rel") != "ds") {
                        return false;
                    }
                    return { 
                        after : false, 
                        before : false, 
                        inside : true 
                    };
                }

我现在将完善我的问题：

我怎样才能如果我有多个 drop_targets，如何获取目标的 ID？ "drop_target" : "#testarea1, #testarea2"

编辑 2

哦，边走边回答我的问题！我已经坐在那里盯着这个看了很多年了。一瞬间我就想到了：

data.r.attr("id")

Edit 3

现在唯一剩下的问题是，尽管所有没有 rel="ds 属性的节点" 无法“拖放到”外部 div/图表中，当将鼠标悬停在允许的区域上时，它们仍然显示 jstree 绿色勾号图标。有什么想法如何阻止这种情况发生吗？

Answer 1

检查 valid_children 选项。