LoginSignup
12

More than 5 years have passed since last update.

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

Posted at

【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>

ポイント

  • jQueryとjQueryUIをCDNで読み込み、jQueryにてプロパティを記述するだけ。
  • プロパティ・イベント等については、APIを参考にどうぞ。
    http://stacktrace.jp/jquery/ui/interaction/sortable.html
  • placeholderに指定したクラスのStyleは、移動予定地のStyleになる。
    デフォルトを利用すると黄色く光るが、書き換えることによって色々カスタマイズできる。
  • forcePlaceholderSizeはドラッグ要素のサイズを自動で取得できる。便利。

結果

並び替え時
d1.PNG
並び替え後
d2.PNG

感想

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

参考

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12