jQuery を使ってドラック&ドロップの並び替えを実現

直感的な操作でよくあるマウスを使った並び替え。これを実現するにはポイントが3つ。

1.sortable() でドラッグ&ドロップを可能に
2.cookie() で並び順をクッキーに保存
3.保存ボタンを押すとクッキーから並び順を取得して ajax 通信で DB に保存

リストの id が並び順に保存される。並び順を取得してからどうするかはそれぞれいろいろあるんじゃないかと。

<script src="/jquery/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/jquery/js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<script src="/jquery/js/jquery.cookie.js" type="text/javascript"></script>

<ul id="sortable">
  <li id="sortable_1" class="ui-state-default">リスト1</li>
  <li id="sortable_2" class="ui-state-default">リスト2</li>
  <li id="sortable_3" class="ui-state-default">リスト3</li>
      :
</ul>
<input name="regist" type="button" value="保存する" onclick='regist();' />

<script type="text/javascript">
  $(function() {
    $("#sortable").sortable({placeholder: 'ui-state-highlight',}).disableSelection();
    $("#sortable").bind('sortupdate', function(event, ui) {
      $.cookie('sortable', $("#sortable").sortable('toArray').join(','));
    });
  });
  function regist(){
      var sort = $.cookie('sortable');
      //ajax で DB に保存
  }
</script>

かわのくんとは

Web系IT企業でプログラミングやマネジメントをしています。趣味で音楽を少々。

Youtubeでライブ動画配信中

Ustreamでライブ動画配信中

スマートフォン向けにPCサイトを自動変換(コンバート)する『CONV2SP』 CSS作成支援ツール『CSSツクール』