Question

I have tree where user can drag and drop element and change elements positions.
After every change I’m sending this serialize array and I want to save it .

Example tree :

Economics
Blogging
General Dev
Japan
Productivity

    Humanities
        Education
        Science
            Haskell
                Earth
            PHP

I’m sending serialize tree throught ajax so I have array linke this.

'0' => "1"
'1' => "2"
'2' => "3"
'3' => "4"
'4' ...
    '0' => "5"
    '1' ...
        '0' ...
            '0' => "6"
            '1' ...
                '0' => "7"
                '1' ...
                    '0' => "8"
                    '1' ...
                        '0' ...
                            '0' => "9"
                            '1' ...
                                '0' => "10"
                        '1' ...
                            '0' => "11"

Array value is table row id.

how insert this array into database with correct position ?

Answer 1

I would suggest using traditional tree storing approach:

create table catalogue (
    id int not null auto_increment primary key,
    name varchar(255),
    catalogue_id int,
    ord int
);

So first of you need to fill up db properly, then rest should be easy to handle.

actual code.

Client side:

   <ul id="enclosure_0" class="sortable">
        <li id="item_1">Level0 - Item 1</li>
        <li id="item_2">Level0 - Item 2</li>
        <li id="item_3">Level0 - Item 3</li>
        <li id="item_4">Level0 - Item 4</li>
        <li id="item_5">Level0 - Item 5
            <ul id="enclosure_5" class="sortable">
                <li id="item_6">Level1 - Item 1</li>
                <li id="item_7">Level1 - Item 2</li>
                <li id="item_8">Level1 - Item 3</li>
                <li id="item_9">Level1 - Item 4</li>
            </ul>
        </li>
   </ul>        
   <script>     
       $(document).ready(function(){
           $(".sortable").sortable({
               stop: function(ev, ui){
                   var list = $(this).sortable("toArray");
                   $.get("sort.php", {items: list, parent_id: $(this).attr('id')}, function(data){window.alert("stored");}); 
                }
            });
        });
    </script>

Server side (sort.php):

<?php

/* you have new order in $_GET["items"], you have parent id in $_GET["parent_id"] */

/* easiest way:
 * */

preg_match("/enclosure_([0-9])+/", $_GET["parent_id"], $tmp);
$parent_id = (int) $tmp[1];
$counter = 0;
foreach ($_GET["items"] as $item){
    $counter++;
    preg_match("/item_([0-9]+)/", $item, $tmp);
    $item_id = (int) $tmp[1];
    $db->query("update catalogue set ord = $counter where id = $item_id");
    /* alternatively, somewhat safer */
    $db->query("update catalogue set ord = $counter where id = $item_id and catalogue_id = $parent_id");
} 

Notes and assumptions:

1) catalogue_id should be 0 for top level categories
2) I believe you are smart enough to get the client side dynamically rendered.
3) Assumes ord is 1 based.
4) php not tested, but should be ok