Jstree works for me, and now I want to be able to drag certain types of nodes into the external div element (containing the diagram generated using tall diagrams). I really don't want the node to be removed from the tree, and I don't want to get a copy of the node. I just want the node reset action to be updated with the node identifier.
I think I can handle the chart update bit, but this is a drag and drop process with jstree. I find it a little confusing. In addition, I want certain types of nodes to be draggable (any with the rel = "ds" attribute).
I'm struggling a bit with this, and I'm not so far away. This is where I should:
$("#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"] });
I read somewhere that binding the "before.jstree" event can help with blocking some nodes from dragging (and the crrm bit too). But I think I'm doing it wrong. It appears that "start_drag" does not 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; } });
Does anyone have any ideas how I can achieve this?
Greetings :)
EDIT: Since then, I have developed how to stop non-ds nodes dropped in the area:
"drag_check" : function (data) { if(data.r.attr("rel") != "ds") { return false; } return { after : false, before : false, inside : true }; }
I will clarify my question now:
How can I get the target id if I have multiple drop_targets? "drop_target": "# testarea1, # testarea2"
EDIT 2
Doh, answering my quesitons when I go! And I sat and looked at it for ages. All this comes to me in no time:
data.r.attr ("ID")
Edit 3
Now the only remaining problem is that, although all nodes that do not have the rel = "ds" attribute cannot be "reset" to an external div / diagram, they still show the jstree green tick icon when you hover over the allowed area . Any ideas how to stop this?