【jQuery UI】要素をドラッグ&ドロップで並び替え【Sortable】

jQuery UI のSortable機能を利用して、要素を動的に並び替えます。
実務で使う機会があり、またどこかで使いそうな感じもするので備忘録的なメモ。

目的

HTML要素をドラッグ&ドロップで動的に並び替える

環境

ECMA Script5
jQuery 1.11.1
jQuery UI

ソースコード

sample.html

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <!-- CSS読み込み -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <!-- CSSを記述 -->
    <style>
        .sort-elements {
            height: 100px;
            border:solid 2px;
            margin:10px;
            background-color:#999999;
        }
    </style>
</head>

<body>
    <!-- ここにHTML要素 -->
    <div id='sortable'>
        <div id='a' class='sort-elements'>a</div>
        <div id='b' class='sort-elements'>b</div>
        <div id='c' class='sort-elements'>c</div>
    </div>
    <!-- Script読み込み -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <!-- jQueryでイベント記述 -->
    <script>
    jQuery( function() {
        /**
         * sortable
         */
        jQuery( '#sortable' ) . sortable( {
                cursor: 'move',                     //移動中のカーソル
                opacity: 0.7,                       //移動中の項目の透明度
                placeholder: "ui-state-highlight",  //ドロップ先の色指定(Styleで指定可能)
                forcePlaceholderSize: true          //trueでドラッグした要素のサイズを自動取得できる
        } );
        $( '#sortable' ).disableSelection();
        /**
         * 動作
         */
        jQuery(document).on('sortstop','#sortable',function(){
            alert('並び替え時の動作')               //sortstopイベントで並び替え後処理を実行
        });
    } );
    </script>
</body>

</html>

ポイント

結果

並び替え時

並び替え後

感想

DOM操作等々面倒そうな感触でしたが、とても使いやすく、シンプルで分かりやすいライブラリでした。
この他にもDraggable、Droppable等面白そうな機能があるので、近々使ってみたいです。

参考

jQuery UI 日本語リファレンス
http://stacktrace.jp/jquery/ui/
jQuery UI の Sortable を使いドラッグ＆ドロップで並べ替え
http://alphasis.info/2011/05/jquery-ui-sortable/