2011年11月30日水曜日

jQuery UI Sortableで複数リスト間ソート

最近は何をするにもjQueryから調べる。だいたいやりたいことはできる。
今回は、複数のソート済みリストがあって、その要素をドラッグ&ドロップで別のリストに移せて、移したらそのリスト内でソートをしたい。

まずは、要素をドラッグ&ドロップで別のリストに移す。
これは、sortableのconnectWithで指定してやることでできる。

Ishida
Uchida
Yamada
Arclight
Blade
Eve
<div class="sortable" style="border:1px solid; padding:5px; margin: 5px; width: 100px;">
    <div>Ishida</div>
    <div>Uchida</div>
    <div>Yamada</div>
</div>
<div class="sortable" style="border:1px solid; padding:5px; margin: 5px; width: 100px;">
    <div>Arclight</div>
    <div>Blade </div>
    <div>Eve</div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.sortable').sortable({
        connectWith:'.sortable'
    }); 
});
</script>

次に移したリスト内でソート。
移した先でのeventはreceive。なので、ここにリスト内でソートさせればOK！！
と、思ったけど、リスト内で位置変えた場合に、ソートがされないので、順番が崩れる。
なので、リスト内のソートはupdateイベントに処理を書く。省略するけど、ajaxでDB側に更新投げる処理は、receiveに書く。

Ishida
Uchida
Yamada
Arclight
Blade
Eve
<script type="text/javascript">
$(document).ready(function(){
    $('.sortable').sortable({
        connectWith:'.sortable',
        update: function(event, ui) {
            var item = ui.item.parent();
            var funcSort = function(a, b) {
                var compA = $(a).text();
                var compB = $(b).text();
                return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
            };
            var listItems = item.children('div').get();
            listItems.sort(funcSort);
            $.each(listItems, function(i, itm) { item.append(itm); });
        }
    }); 
});
</script>

これでやりたいことはできた。リスト内のソートはtextでやったけど、classにソートに使う値を持たせるなどやりようはある。
jQueryとか使うとUIリッチになってサービスの使い勝手あげられるのでGood！！
ラベル: ,