jQuery UI の sortable は、demo だけを見てると、ではソートした結果をどう受け取ってきて使うのかは、よく読まないと見えてこない。
updateイベントで、toArrayメソッドを使って並び変わった結果を取得する。updateイベントは、ドラッグの操作変更された時だけ
発生するからこれを使う。
注意が必要で。toArrayは、デフォルトでリスト（ｌi )の id属性値の配列を返す。
Wicketなど、タグの id に任意の識別子を使用する場合で連番にならない場合は、toArray、デフォルトでは使いづらいので、toArrayのオプションで取得するものを指定する。
sortable("toArray", { attribute: 'value' })
というようにする。
例）
<ol id="sortable">
<li class="ui-state-default" value="1"><span>項目 1</span></li>
<li class="ui-state-default" value="2"><span>項目 2</span></li>
<li class="ui-state-default" value="3"><span>項目 3</span></li>
<li class="ui-state-default" value="4"><span>項目 4</span></li>
<li class="ui-state-default" value="5"><span>項目 5</span></li>
</ol>
<div>
<h3 id="result"></h3>
</div>
マウスの形状なども指定してやる。
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li{ margin: auto 0px; padding: 0; font-size: 16px; height: 40px; width: 200px; }
#sortable li:hover{ cursor: pointer; }
#sortable li span{ position: absolute; margin: 12px 0px 0px 24px; }
#sortable .ui-selected{ background: #f39814; color: #ffffff;
cursor: move!important;
}
</style>
<script type="text/javascript">
$(function(){
$('#sortable').sortable({
placeholder: "ui-state-highlight",
activate: function(e, ui){
ui.item.addClass('ui-selected');
},
deactivate: function(e, ui){
ui.item.removeClass('ui-selected');
},
update: function(e, ui){
var updatedInfo = $('#sortable').sortable("toArray", { attribute: 'value' }).join(",");
$('#result').html(updatedInfo);
}
});
$('#sortable').disableSelection();
});
</script>
jsFiddle に載せるべきだろうけど、登録して管理するのが面倒なので、
画面キャプチャだけ。。。
