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