Trying to setup drag and drop re-ordering with PHP AJAX save new order in DB

[Michael Davenport]

Hi everyone,

Hope all is well, any help would be appreciated with jsTree - I am an absolute beginner but I have managed to setup my tree which loads json data via Ajax from PHP / MYSQL. This part is working I am now trying to setup re-ordering within the single tree and to save the order back to the database via Ajax and PHP / MYSQL.

So far I am trying to debug move_node.jstree by doing an alert(data); but I get nothing. Also there is no errors in my javascript so hard to know why it's not working.

None of the dnd functions below are working either I just get a red X where-ever I drag the nodes to. I suspect I need to setup "types" in the main jstree call.

I would like the possibility of infinite levels on the children.

Here is my JS:

$('#jstree1').jstree({
        'plugins' : [ 'themes', 'html_data', 'crrm', 'dnd', 'contextmenu'],
        'core': {
            'data': {
                'url': './ajax/get_page_data.php',
                'type': 'POST',
                'dataType': 'JSON',
                'data': function (node) {
                    return { 'd_id': <?=$DOC['d_id']?>};
                }
            }
        },   
        'dnd' : {
            'drop_finish' : function () {
                alert("DROP");
            },
            'drag_check' : function (data) {
                if(data.r.attr("id") == "phtml_1") {
                    return false;
                }
                return {
                    after : false,
                    before : false,
                    inside : true
                };

                alert("hhh jjj kk ");
            },
            'drag_finish' : function () {
                alert("DRAG OK");
            }
        },   
    });
    $("#jstree1").bind("move_node.jstree", function (e, data) {
        alert(data);
          /*
        `data` contains:
        .o - the node being moved
        .r - the reference node in the move
        .ot - the origin tree instance
        .rt - the reference tree instance
        .p - the position to move to (may be a string - "last", "first", etc)
        .cp - the calculated position to move to (always a number)
        .np - the new parent
        .oc - the original node (if there was a copy)
        .cy - boolen indicating if the move was a copy
        .cr - same as np, but if a root node is created this is -1
        .op - the former parent
        .or - the node that was previously in the position of the moved node
          */
    });   

[Ivan Bozhanov]

set check_callback to true (as stated on http://www.jstree.com/docs/interaction/ : Please keep in mind that by default all modifications to the tree are prevented (create, rename, move, delete). To enable them set core.check_callback to true
In the move_node handler try console.log, not alert - here is what you will get in the object:
http://www.jstree.com/api/#/?q=move_node&f=move_node.jstree