0

次のコードを使用して、jquery のネストされた並べ替え可能なメニューを試しています。すべて正常に動作しますが、質問があります: メニュー項目をデータベースに保存するためにシリアル化プロセスの結果を使用するにはどうすればよいですか?

アイテムを移動したときに得られるのは、[pages] => item[]=1&item[]=7どのアイテムが別のアイテムに移動したのか、どのアイテムが親になったのかなどがわからないようなものです...

メニュー項目の並べ替えの完全なリストを示す、より詳細な配列が必要だと思います。

<!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>

お時間をいただきありがとうございます。

この./jquery-ui-1.8.20.custom.min.jsファイルには、jquery 自体とjquery-ui(jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.mouse.js、jquery.ui.sortable.js) が含まれています。

./ajax.phpシリアル化された結果を処理する責任があります。

4

0 に答える 0