JavaScriptプログラムに関する各種メモ書き

ドラッグ、ドロップで要素を順番変更するjQuery UI Sortableモジュール

ドラッグ、ドロップでテーブルやリスト要素を順番変更する【jQuery UI Sortableモジュール】というのがあります。

■ JQUERY SORTABLE

http://jqueryui.com/demos/sortable/

http://jqueryui.com/download ←ダウンロードはこちら

JS
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.xxxxx.js"></script> 
<script type="text/javascript"> 
$(function(){
$("#sortable").sortable({
update: function(event, ui) {
    var data  = $("#sortable").sortable("serialize");
    var data2 = $('#sortable').sortable('toArray').toString();
    alert(data);
    alert(data2);
}
})
.disableSelection();
});
<script>
HTML
<ul id="sortable"> 
<li id="list_1">ほげほげ</li> 
<li id="list_2">ふがふが</li> 
<li id="list_3">てすてす</li> 
</ul>

とするだけで、<li>要素がドラッグ&ドロップで順番入れ替えできます。

入れ替え後のデータは data(PHP用) , data2(CSV形式) に入るのでそれをプログラムに渡すといいでしょう。


関連エントリー

No.713
03/30 14:09

edit

jQuery
DOM
Ajax