<!--- jQuery本体 --->
<script src="js/jquery-1.2.6.min.js"
    type="text/javascript"></script>
<!--- jQuery UI --->
<script src="js/ui/jquery.ui.all.js"
    type="text/javascript"></script>

<style type="text/css">
  .ui-sortable { /* 並べ替え可能な要素 */
    cursor:move; /* カーソルの形状を変更 */
  }
</style>

<!--- 適用する要素 --->
<ul id="sortList">
  <li id="1">
    <img src="../img/coldfusion/page.png" />  
    <a href="http://www.digital-moon.com/coldfusion/
    sample_image.cfm">ColdFusion （画像認証）</a>
  </li>
  <li id="2">
    <img src="../img/coldfusion/page.png" />  
    <a href="http://www.digital-moon.com/">
    デジタルムーン トップページ</a>
  </li>
  <li id="3">
    <img src="../img/coldfusion/page.png" />  
    <a href="http://www.sarari.cc/">
    簡単ホームページ作成ＣＭＳ「さらり」</a>
  </li>
  <li id="4">
    <img src="../img/coldfusion/page.png" />  
    <a href="http://www.t-clip.info/">
    宝塚文化振興財団ＷＥＢ</a>
  </li>
</ul>

<!--- フォーム --->
<center>
<form action="" method="post">
  <input type="hidden" id="sortId" name="sortId" />
  <input type="submit" id="submit" name="submit"
      value="この並びで保存する" disabled="disabled" />
</form>
</center>

<script type="text/javascript">
$(function() {
  //sortableオプション
  var option={ 
    // 並べ替え可能な要素
    items : 'li', 
    // ドラッグ可能な要素
    handle : 'img',
    // 並べ替え終了直後に実行される関数
    stop : function(){
      // 並べ替えた順番を保存します
      var sort_id=[];
      $('li','#sortList').attr('id',function(i){
        sort_id.push(this.id);
      });
      $('#sortId').val(sort_id.toString())
    },
    // 並べ替え終了後に位置が入れ替わっていたら
	// 実行される関数
    update : function(){
      // ボタンを有効にします
      $('#submit').removeAttr('disabled'); 
    }
  };
  //sortable実行
  $('#sortList').sortable(option);
});
</script>