読者です 読者をやめる 読者になる 読者になる

jQuery UI の sortable の toArray は、id だから。

jQuery UIsortable は、demo だけを見てると、ではソートした結果をどう受け取ってきて使うのかは、よく読まないと見えてこない。

updateイベントで、toArrayメソッドを使って並び変わった結果を取得する。updateイベントは、ドラッグの操作変更された時だけ

発生するからこれを使う。

注意が必要で。toArrayは、デフォルトでリスト(li )の 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 に載せるべきだろうけど、登録して管理するのが面倒なので、
画面キャプチャだけ。。。

f:id:posturan:20160313173042j:plain