ドラッグ＆ドロップで順番変更(並べ替え)実装するならjQueryUI(Sortable)で。
2014年1月24日
もはや実装するっていうか、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とかでサーバーに飛ばせばよろしいかと。