I am trying to use JStree for a category / subcategory tree. It took quite a while, but I managed to create a tree with JSON data that I retrieve from the database (using PHP to query and build JSON objects).
Now, I would like to be able to track drag and drop actions. Ie: subcategorie x from maincategory a is dragged to maincategorie b. I need to write this to change the database after the action. I decided that I would need the "check_move" or "drop_finish" functions. drop-finish does not work at all, the event does not fire. This is due to the fact that my nodes do not have a jstree-drop class, but it seems that I can not enter the class correctly: it will not work.
The check_move function will continue to run when passing other subcategories and, therefore, creates a load of unwanted data.
My (test) JSON data:
[ { "metadata": { "id": "1" }, "data": "Geluid", "children": [ { "data": "Speakers", "attr": { "href": "" }, "metadata": { "id": "1" } }, { "data": "Versterkers", "attr": { "href": "" }, "metadata": { "id": "3" } } ] }, { "metadata": { "id": "2" }, "data": "Licht", "children": [ { "data": "Parren", "attr": { "href": "" }, "metadata": { "id": "2" } } ] } ]
My JStree code:
$(function () { $("#Create").click(function () { $("#tree").jstree("create"); }); $("#Rename").click(function () { $("#tree").jstree("rename"); }); $("#Remove").click(function () { $("#tree").jstree("remove"); }); $("#tree").jstree({ "dnd" : { "drop_finish" : function (data) { alert ("Drag OK"); //alert("Dragged: " + data.o.attr('id') + " to " + data.r.attr('id')); } }, "themes" : { "theme" : "classic", "dots" : true, "icons" : false }, "json_data" : { "ajax" : { "url" : "get_category_tree.php" } }, "plugins" : [ "themes", "json_data", "ui", "crrm", "checkbox", "dnd" ] }) .bind("select_node.jstree", function (e, data) { var req = new ZaxasRequest(); req.getContent("category_content.php?id=" + data.rslt.obj.data('id') +"", "category_content"); }) });
Basically, I would like to get identifiers. Do not worry about the fact that the main category and subcategory id can be the same, I will fix this problem later;) Can someone point me in the right direction?