update nestet set tree with php and nestable.js jquery plugin

Question

EDIT: After great answer the @vadim-ashikhman. The end of the question.

Resources I'm using:

• PHP Framework Codeigniter
• Nested set Library : https://github.com/olimortimer/ci-nested-sets/
• jQuery library: http://dbushell.github.io/Nestable/

I managed to add categories and subcategories without any problem.

I have also been able to show the menu with all categories with nestable jQuery library.

So far so good.

Now, when I try to sort through drag and drop. Captured the entire array, here's an example:

[{
  "id": 1,
  "children": [{
    "id": 2,
    "children": [{
      "id": 3
    }, {
      "id": 6
    }, {
      "id": 5
    }, {
      "id": 7
    }, {
      "id": 9
    }]
  }, {
    "id": 8,
    "children": [{
      "id": 10,
      "children": [{
        "id": 11
      }, {
        "id": 12
      }, {
        "id": 13
      }, {
        "id": 14
      }, {
        "id": 15
      }]
    }, {
      "id": 16,
      "children": [{
        "id": 17
      }, {
        "id": 18
      }, {
        "id": 19
      }, {
        "id": 20
      }]
    }]
  }, {
    "id": 22,
    "children": [{
      "id": 23
    }, {
      "id": 24
    }, {
      "id": 25
    }, {
      "id": 26
    }]
  }, {
    "id": 27,
    "children": [{
      "id": 28
    }, {
      "id": 29
    }, {
      "id": 30
    }, {
      "id": 31
    }]
  }, {
    "id": 32
  }, {
    "id": 39
  }, {
    "id": 40
  }]
}]

But not how to update the positions, this has me baffled, I took nearly 16 hours running tests but without any result.

• I tried to re order the same data with the left and righ fields.
• Also I tried to clean the table and add the menu again.

Without any favorable result.

So I come to you to see if you can help me.

EDIT: After great answer the @vadim-ashikhman

• I used a Fork of library nestable.js, because he had a function that could get the position(https://github.com/BeFiveINFO/Nestable/)
• Code Javsascript:

$('#nestable').nestable({
          group: 1,
          maxDepth :6

      }).on('dragEnd', function(event, item, source, destination, position) {
     // Make an ajax request to persist move on database
     // here you can pass item-id, source-id, destination-id and position index to the server
     // ....
     var parent_id = $(item).parent().parent().data('idcata');
     var actual_id = $(item).data('idcata');
     var prev_id   = $(item).prev("li").data('idcata');
     var page_id   = $(item).data('pagina-id');

     console.log("id "+ actual_id + "\nParent: "+ parent_id +"\nPosition:" + position + "\nPrev : " +  prev_id + "\nPagina_id: "+page_id);

     $.ajax({
                type: "POST",
                dataType: "json",
                url: '<?=site_url("admin/categories/ordenar")?>',
                data: {

                  id:actual_id,
                  parent_id:parent_id,
                  position:position,
                  prev_id:prev_id,
                  page_id:page_id,
                },
                cache: false,
                success: function(data) {

                    if(data.data==1)
                        alert('Guardado!!');
                    else
                       alert('No se ha podido guardar la posición');
    
                   },
                   error: function() {
                    alert('No se ha podido guardar la posición');
                  }
          });

 });

• Code PHP:

    $idcata      = $this->input->post('id');
 $newParentId = $this->input->post('parent_id');
 $newPosition = $this->input->post('position');
 $prevId      = $this->input->post('prev_id');
 $page_id     = $this->input->post('page_id');

 $this->nested_set = new Nested_set();
 $this->nested_set->setControlParams('nested_set_tree');
 $categoria = $this->nested_set->getNodeFromId($idcata);
 $categoriaPadre = $this->nested_set->getNodeFromId($newParentId);

 if($newPosition == 0 ){
  $newCategoria = $this->nested_set->setNodeAsFirstChild($categoria,$categoriaPadre);
 }else{

  $prevCategoria = $this->nested_set->getNodeFromId($prevId);
  $newCategoria  = $this->nested_set->setNodeAsNextSibling($categoria,$prevCategoria);
 }

TADA!!! And it works perfectly

Answer 1

When you move a node to new position, get new position previous node and parent node:

1. If previous node not found insert moved node as first child of parent.
2. If previous node found just use setNodeAsNextSibling() method from the library.

You dont need to capture and update the entire tree.