nestable tree with left and right value

Question

Nestable tree structure handle with left and right value I already done the functionality of add parent node, child node and delete node. But How to save tree value after moving nodes drag and drop with the nestable.js

Lest see my output what I want to do....

i want to manage with data-left, data-right values

And my database structure is

Please help in this how to manage drag and drop functionality.

Answer 1

I tried to comment this, but the website tells me I need 50 Reputation in order to do so, so this may or may not answer your question, I'd have to wait until I got home when I could fiddle with something similar in database / Javascript structure.

I'm fairly familiar with left/right_id tables and such. The first place I saw them was in phpBB3.0 and I spent a whole lot of time reading up on them.

One thing you could do to help you expedite your queries is to add a parent_id column, this way you can immediately get ALL the child notes without having to use "left_id > 1 AND right_id < 8" in your SQL statements.

Now, for your javascript question, how I will try to go about this when I get home is to declare an array of id keys => child values. So, in the screenshot example you've given above you could hopefully get to something like this

array(

    2 => array(
       5 => array(
          3
        ),
       6
    ),
    3 => array(
      8
    ),
    4
)

In order to get this you'd have to loop through the DOM for each member of the list, using their id's and the array.push function to add values as necessary.

I'll try and help more once I can get to my house where I have a PHP server setup, but this should give you an Idea of how to get it started.

Are you using any Javascript framework (such as MooTools, jQuery)?

Edit: So, I've worked on it for quite some time and I've got a general thing working. Below is the code directly responsible for looping through the DOM tree and assigning left/right_id values. It should be fairly easy to edit it for your liking.

I have a preference for MooTools, so I wrote this using the mootools library (it offers some Element features that are quite nice and in fact gave me a multi-level drag and sort tool to test this with). If you prefer to use another library, it should be fairly easy to switch the code to work for it, but I do not use jQuery so I am unfortunately not helpful in that regard

Link to download all files involved: Here

function calculate_ids(el,left_id, parent_id){

            var el = $(el);
            //makes the element a MooTools Element

            var left_id = left_id || 1;
            //If left_id is given, we are using this function recursively

            var parent = parent_id || 0;
            //Gives us a quick method in order to figure out what level we are currently on

            var id_array = {};
            /*ID array object will look like
                {
                    1:{
                        'left_id':1,
                        'right_id':2,
                        'parent':0
                    },
                    2:{
                        'left_id':3,
                        'right_id':6,
                        parent_id:0
                    },
                    3:{
                        'left_id':4,
                        'right_id':5
                    },
                    etc.
                }
            */

            var els = el.getChildren('li');
            //Get the immediate children

            els.each(function(child){

                var id = child.get('id');
                //The ID

                var descendants = child.getElements('li');
                //Gets ALL most descendent children that match the format, these are ordered the way they are in the DOM

                var right_id = left_id + descendants.length * 2 + 1

                id_array[id] = {
                    'left_id':left_id,
                    'right_id':right_id,
                    'parent':parent
                };
                if(descendants.length > 0){
                    //There are child elements to this thing, recursion!
                    id_array = Object.merge(id_array, calculate_ids( child.children[0], left_id + 1, id) );
                }

                left_id = right_id + 1;
                //Increment the left_id counter
            });

            return id_array;

        }

Known Issues

The example code I posted doesn't correctly calculate the left/right ids after they've been calculated a first time or moved up/down a level if they were calculated previously. I'm guessing this has something to do with how the multi-level sort class moves the items around. This code is meant to serve as a starting point. I'm really busy (unfortunately), so I may or may not be able to fix this issue in the future, but either way this code should serve as a great starting point.