Drag node from jstree onto foreign div element, then perform action when dropped

I have got a jstree working, and now want to be able to drag certain types of nodes to an external div element (containing a chart generated by highcharts). I don't actually want the node to be removed from the tree, nor do I want a copy of the node. I simply want the action of dropping the node to update the chart using the node's ID.

I think I can work out the chart updating bit, but it is the process of dragging/dropping with jstree I am finding a little confusing. Plus I only want certain types of nodes to be draggable (any with an attribute of rel="ds").

I'm struggling quite a bit with it, and haven't got very far. This is where I have got to:

$("#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")
                    }
       开发者_JAVA百科         }
            },
            "crrm" : { move : { check_move : function (m) { return false; } } },

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

I read somewhere that binding a 'before.jstree' event could help out with blocking certain nodes from being dragged (and the crrm bit too). But I think I am doing it wrong. It appears that "start_drag" doesn't have access to 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;
            }
        });

Anyone got any ideas how I can achieve this task?

Cheers :)

EDIT: I've since worked out how to stop non 'ds' nodes being dropped on the area:

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

I'll refine my question now:

How can I get the target's ID if I have multiple drop_targets? "drop_target" : "#testarea1, #testarea2"

EDIT 2

Doh, answering my quesitons as I go along! And I've been sitting staring at this for ages now. It's all coming to me in a flash:

data.r.attr("id")

Edit 3

Now the only remaining issue is that although all nodes which don't have an attribute of rel="ds" cannot be 'dropped' into the external div/chart, they still show a jstree green tick icon when hovering over the permitted area/s. Any ideas how to stop this from happening?

Check the valid_children option.