jQueryUI Soatableで並び順を取得

Tag:

jQueryUIのSoatableを利用すると、ドラッグ&ドロップで表示順を変更することができます。ここでは、表示順を変更した際の並び順を取得する方法について紹介します。

デモ

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

並び順 

ソース

読み込みファイル

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

CSS

#sortable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 60%; 
}
#sortable li { 
    margin: 0 5px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    height: 1.5em; 
}
html>body #sortable li { 
    height: 1.5em; 
    line-height: 1.2em; 
}
.ui-state-highlight { 
    height: 1.5em; 
    line-height: 1.2em; 
}

HTML

<ul id="sortable">
    <li id="item1" class="ui-state-default">Item 1</li>
    <li id="item2" class="ui-state-default">Item 2</li>
    <li id="item3" class="ui-state-default">Item 3</li>
    <li id="item4" class="ui-state-default">Item 4</li>
    <li id="item5" class="ui-state-default">Item 5</li>
</ul>
<p>並び順 <span id="result"></span></p>

JavaScript

$(function () {
    $('#sortable').disableSelection();
    $('#sortable').sortable({
        placeholder: "ui-state-highlight",
        update: function (ev, ui) {
            var result = $(this).sortable("toArray");
            console.log(result);  //  例)  [object Array]["item1", "item2", "item3", "item4", "item5"]
            $("#result").html(result.join(','));
        }
    });
});

6行目で、$(this).sortable(“toArray”)を実行しています。これにより、リストの各IDを、並び替えた状態の順序で、配列として取得できます。

スポンサーリンク