jQuery UI ドラッグ&ドロップで並び替え sortableの使用方法

2016/02/24

sortable

概要

jQuery UIを使用して、ドラッグ&ドロップで並び替えを行います。
sortableを使用することで、一瞬で実装できちゃいます。

準備

まずは、 こちらからjQueryをダウンロードします。
次に、 こちらからjQueryUIをダウンロードします。

ダウンロードしたファイルをHTMLで読み込むよう以下のように指定します。


<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

以上で準備は完了です。

実装サンプル

HTML例


$( '.jquery-ui-sortable' ).sortable();

JavaScript例


<div class="jquery-ui-sortable">
  <div>エリア1</div>
  <div>エリア2</div>
  <div>エリア3</div>
</div>

たったこれだけで並び替えできます。
よく、以下を指定しているのを見かけますが非推奨なのでおすすめできません。


$( '.jquery-ui-sortable' ).disableSelection();

並び順を保持

cookieを利用して、並び順を記録してみます。
前提として、jquery.cookie.js をダウンロードして読込んでください。

JavaScript例


$(function() {
	var cookie_name_sortable = "sortable";
	var sortable_class = ".jquery-ui-sortable";

	$(sortable_class).sortable();
	$(sortable_class).sortable({
		update: function(ev, ui) {
			var sorted =  $(sortable_class).sortable("toArray").join(",");
			$.cookie(cookie_name_sortable, sorted, {expires: 30});
		}
	});

	if($.cookie(cookie_name_sortable)) {
		var sorted = $.cookie(cookie_name_sortable).split(",").reverse();
		$.each(
			sorted,
			function(index, value) {$('#'+value).prependTo(sortable_class);}
		);
	}
});
Related

Vagrant+Docker+PHP環境で「session.save_path」指定時に、セッションファイルが空になるエラー

ファイル共有でのフォルダの所有者を設定 結論 PHP5.4.28 からセッションファイルのownerはrootもしくはWebサーバのユーザに限るという制限が...

LINEと連携したテイクアウト事前注文システム徹底比較!

目次 テイクアウト予約・注文受付システムのトレンド LINEと連携したテイクアウト事前注文システムの価格表 L.B.B.Cloud テイクイーツ ...

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...
トップへ戻る