ドラッグ&ドロップで順番変更(並べ替え)実装するならjQueryUI(Sortable)で。

もはや実装するっていうか、jQueryUIを読み込むだけなんですが・・。

<html>
  <head>
   <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="sort.js"></script>
  </head>
  <body>
    <div id="sort">
      <p>aaaaa</p>
      <p>bbbbb</p>
      <p>ccccc</p>
      <p>ddddd</p>
    </div>
  </body>
</html>

上記のようなhtmlを用意して

$(function(){
  $('#sort').sortable();
});

こんなjsを読み込めば、とりあえず並び変えができます。
このままだと並び替えるだけですが・・。

変更時の順番を取得する

そこで各p要素にidをつけます。

<div id="sort">
  <p id="p1">aaaaa</p>
  <p id="p2">bbbbb</p>
  <p id="p3">ccccc</p>
  <p id="p4">ddddd</p>
</div>

で、jsも修正。

$(function(){
  $('#sort').sortable({
    update: function() {
      var ids = $(this).sortable('toArray').toString();
      console.log( ids );
      // -> p1,p2,p3,p4
    }
  });
});

ま、送信してませんが、、
このidsを$.ajaxとかでサーバーに飛ばせばよろしいかと。

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください