0

I'm using the following code to experiment with nested sortable menus of jquery. Everything works just fine but I do have a question though: How do I use the result of the serialization process in order to save the menu items in the database?

What I get when I move the items is something like [pages] => item[]=1&item[]=7 and that way I don't know which item moved into another one or which became a parent etc...

I guess I need a more detailed array that states the full list of the menu items sort.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type='text/javascript' src='./jquery-ui-1.8.20.custom.min.js'></script>
    <title>my title</title>
    <style type='text/css'>
    ul { min-height:10px; }
    li { width: 150px; }
    </style>

    <script type='text/javascript'>
    $(window).load(function(){
           $("ul").sortable({
            connectWith: "ul",

            update: function(event, ui) {
            $.ajax({
              url: './ajax.php',
              type: 'POST',
              data: { pages: $('ul').sortable('serialize')},
              success: function(data) {
                  alert(data);
              }
            });
            }
        });
    });
    </script>
</head>
<body>
    <ul>
<li id="item_1" >Item 1</li>
<ul>
<li id="item_2" >Item 1 1<ul></ul></li>
<li id="item_3" >Item 1 2<ul></ul></li>
<li id="item_4" >Item 1 3<ul></ul></li>
</ul>
<li id="item_5" >Item 2<ul></ul></li>
<li id="item_6" >Item 3<ul></ul></li>
<li id="item_7" >Item 4<ul></ul></li>
</ul>
</body>
</html>

Thank you for your time and thanks!

The ./jquery-ui-1.8.20.custom.min.js file contains jquery itself and jquery-ui (jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.sortable.js).

./ajax.php should be responsible to handle the serialized result.

4

0 回答 0