jquery-ui - jqueryソート可能、アイテムの順序変更

Question

並べ替え可能なリスト内の項目をドラッグせずに並べ替えることはできますか? たとえば、アイテムのリストが 1、2、3 の場合、リンク (ボタンなど) をクリックすると、リストは 3、1、2 になります。これには「ソート可能」を使用しないでください。

Answer 1

次の HTML があるとします。

<ul id="sortable" class="ui-sortable">


    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default" style=""><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li><li class="ui-state-default" style=""><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default" style=""><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>

</ul>

次の関数を呼び出すことで、ドラッグ アンド ドロップせずにリスト項目を並べ替えることができます。

function shuffle(){
    var myList = $('ul'); //Fetch the list.
    var listItems = myList.children('li'); //Extract all listItems from it.
    listItems.sort(function(a,b){ //This function sorts the items.
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : 1; //return a -1 or 1 depending upon specific condition.
    });
    $(myList).append(listItems);
}

次のような単純なボタンを使用して関数を呼び出すことができます。

<button onclick="shuffle();">Reorder</button>

ここでサンプル実装を確認できます。