jQuery.sortable() save for php

這項功能是在實現拖放選單時所製作的，由此初搞讓我成功的實現整個網頁在使用像igoogle拖曳的功能
，並且能夠儲存
這程式的demo版是在一個國外網站下載到的，當時提供的程式檔案在底下說明介紹
(先跟作者大大說聲抱歉了，我沒存到網址>"<)
1.=>index.html (拖曳介面執行首頁)
2.=>process-sortable.php (紀錄頁面選單位置立即儲存程式)
3.=>jquery-1.3.2.min.js ,jquery-ui-1.7.1.custom.min.js
4.=>style.css (CSS檔案)

說明一：起初再使用 index.html 時，當移動選單時就會在就會顯示update到
process-sortable.php這支程式的SQL語法，是以陣列方式顯示

Array
(
    [0] => UPDATE `interface` SET `position` = 0 WHERE `id` = 2

    [1] => UPDATE `interface` SET `position` = 1 WHERE `id` = 3

    [2] => UPDATE `interface` SET `position` = 2 WHERE `id` = 1

    [3] => UPDATE `interface` SET `position` = 3 WHERE `id` = 4

)

說明二：把 var order=$('.test-list').sortable('serialize');印出來探個究竟

<script type="text/javascript">
            $(document).ready(function() {
                $(".test-list").sortable({
                    handle : '.handle',
                    update : function () {
                        var order = $('.test-list').sortable('serialize');
                        alert(order);
                        $("#info").load("process-sortable.php?"+order);
                    }
                });
            });
        </script>

結果發現 order 顯示出來的字串為

listItem[]=2&listItem[]=1&listItem[]=4&listItem[]=3

說明三：
 *listItem[]=2&listItem[]=1&listItem[]=4&listItem[]=3這段就可以看出
  目前移動後的位置第一位為選單2第二位為選單1第三位為選單4第四位為選單3，而
  看底下標籤<div>可看出id名稱底線(_)之後的數字不是跟listItem所傳的數字是一樣呢?
  <div id="listItem_1"></div>
  <div id="listItem_2"></div>
  <div id="listItem_3"></div>
  <div id="listItem_4"></div>
 *由以上可得知傳過去process-sortable.php的 id 就是標籤下<div>的id名稱底線後的數字
  而position也就是陣列位置


說明四：
*這時打開process-sortable.php這支程式看個究竟

 foreach ($_GET['listItem'] as $position => $item) :

    $sql[] = "UPDATE `interface` SET `position` = $position WHERE `id` = $item".'<BR>';

  endforeach;

  這段程式可以看出利用foreach迴圈把傳過來的listItem的位置以及陣列位置指向的"值"存成變數
  然後以sql[]方式update到資料庫

說明五：
*這下就好辦了，首先在資料庫開個表叫做interface 給他兩個欄位"position"跟"id"
  先自行設定position(位置)為0,1,2,3而對應的id為1,2,3,4再來把index.html改成
  index.php，而底下的選單就以while方式列出
----------------------------------------------------------------------------------------------

懶人包下載

操作步驟一：
先把sortable.sql匯入到mysql。
操作步驟二：
打開include底下的 open.php，更改你的SQL帳號密碼
操作步驟三：
打上妳的網址 例如:http://localhost/index.php
--------------------------------------------------------------------------------------------
初版就寫了好久~"~，後面更多類似拖曳介面的說明可能要寫更久了