ドラック＆ドロップでリストの要素を入れ替える
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を利用した場合、スクロールしないと見えない位置の要素移動時に表示が崩れてしまい、正常に表示されませんでした。