ドラッグ、ドロップで要素を入れ替え

お久しぶりです、kishidaです。
今年は暑いなーと思っていたら最近急に冷えてきました。
そういえば去年は一度気温が下がってまた上がってたような記憶があります。
今くらいが過ごしやすいのでこのまま冬になるのを祈ります。

 

 

テーブルのセルを入れ替える処理をしました。
jQuery UIのsortableを使用すると簡単に出来ました。

$(function(){
  //並び順
  $( "#sortable" ).sortable();
});
A
B
C
D

並びを保存したい場合はsortableを以下のように変更すると要素のidが取得できるのでそれをDBやcookieなどでコネコネしてやればいいと思います。

$(function(){
  //並び順
  $( "#sortable" ).sortable({
    update: function(ev, ui) {
      var updateArray =  $("#sortable").sortable("toArray");
      alert(updateArray);  //出力結果 : ["A","B","C","D"]
    }
  });
});

sortableは<table>以外にも<ul>などにも適用可能です。

カテゴリー: html, javascript

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*