PbTimes 情報誌

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

2016/02/24

• JavaScript
• Web
• jQuery

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);}
		);
	}
});