Using MPTtree and jQuery sortable

[eluser]Gaz[/eluser]
Hi all,

I'm using MPTtree to store my site navigation and I want the user to be able to reorder it with the jQuery UI sortable plug in. I can move the nodes around and get the order data back with

Code:

data = $(this).sortable('serialize');

but I'm wondering what the best way is to go about reordering the nodes in the database with MPTree.

As the user can move any node anywhere in the tree I'm thinking the only way to reorder the nodes is

1. Copy all the existing node data
2. Delete the existing nodes from the current tree
3. Re-add the nodes with append_node_last()

What do you guys think?

Cheers,
Gaz.

[eluser]iDenta[/eluser]
Did anyone solve this?

[eluser]Gaz[/eluser]
I did solve this, but used jQuery draggable and droppable instead.

Using jQuery and PHP, the solution I found is as follows:

Code:

// Javascript

$('.droppable').droppable({
    activeClass: 'dropactive',
    activeHover: 'drophover',
    drop: move_node,
    tolerance: 'pointer'
});

// ...

function move_node(e, ui) {
    moved_id = $(ui.draggable).attr('id');
    target_id = $(this).attr('id');

    $.ajax({
        type: "POST",
        url: "/link/move_node/" + moved_id + "/" + target_id,
        processData: false,
        data: null,
        async: false,
        success: function(html) {
            // Refresh page
            history.go(0);
        }
    });
}

Code:

function move_node($source_id, $target_id) {
    /* Important if caching is enabled on the MPTT table */
    $this->ci->db->cache_off();

    /* Strip the text from the IDs (numeric element IDs are illegal
       in HTML */
    $source_id = str_replace('node_id_', '', $source_id);
    $target_id = str_replace('node_id_', '', $target_id);
        
    $source_node = $this->ci->tree->get_node_byid($source_id);
    $target_node = $this->ci->tree->get_node_byid($target_id);
        
    $this->ci->tree->move_node_append_last($source_node['lft'], $target_node['lft']);

    /* AJAX call, so no further processing needed */
    exit;
}

This is not ideal as the page does not update in the browser after the move, so requires a page refresh after the AJAX call (hence the use of history.go).

Cheers,
Gaz.