2017-04-17 更新

ドラック&ドロップでリストの要素を入れ替える

AngularJSでリスト(ul li)の要素をドラック&ドロップで入れ替える方法についてです。

スワイプ($swipe)の処理でどうにかしないといけないものと思っていましたが、ui-sortableというライブラリで簡単に実装できるようです。

目次

  • 必要なもの
  • コード
  • 利用時の注意
  • 参考リンク

必要なもの

「jQuery UI Touch Punch」はタッチ操作で動作させたい場合に必要です。マウス操作だけならいりません。<script>タグでライブラリを参照するだけで使えました。

コード

JavaScript


var myApp = angular.module('exampleApp', ['ui.sortable']);

myApp.controller('exampleCtrl', function ($scope) {
    $scope.items = ["a", "b", "c", "d", "e"];
    $scope.sortableOptions = {
        update: function(e, ui) {
            // リスト変更前
            console.log('update: ' + $scope.items.toString());
        },
        stop: function(e, ui) {
            // リスト変更後
            console.log('stop: ' + $scope.items.toString());
        }
    };
});

HTML


<div ng-controller="exampleCtrl">
    <ul ui-sortable="sortableOptions" ng-model="items">
        <li ng-repeat="item in items">
            <span ng-bind="item"></span>
        </li>
    </ul>
</div>

利用時の注意

iOSで「-webkit-overflow-scrolling: touch;」を設定している要素内でui-sortableを利用した場合、スクロールしないと見えない位置の要素移動時に表示が崩れてしまい、正常に表示されませんでした。

参考リンク

AngularJS】関連記事