Angular.jsでドラッグ＆ドロップを実装する

Angular.jsでng-repeatの内容をドラッグ＆ドロップで入れ替えられるようにしてみます。

サンプルコード

ui-sortableを使用します。
jQueryとjQuery UIも必要になるので、合わせて読み込ませるようにしてください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="sortable.min.js"></script>

HTML

入れ替えを行う要素の親要素にui-sortableとng-modelを指定します。

<div ng-controller="ctrl">
	<ul ui-sortable ng-model="items">
		<li ng-repeat="item in items">{{ item }}</li>
	</ul>
</div>

JavaScript

var myAppModule = angular.module('app', ['ui.sortable'])
myAppModule.controller('ctrl', function($scope) {
	$scope.items = ['クザク', 'ランタ', 'ハルヒロ', 'ユメ', 'メリイ', 'シホル'];
});

ng-repeatをドラッグ＆ドロップで入れ替えのデモページ
　

オプションの設定

HTML

オプションを設定する場合、ui-sortableに値を指定します。

<div ng-controller="ctrl">
	<ul ui-sortable="sortableOptions" ng-model="items">
		<li ng-repeat="item in items">{{ item }}</li>
	</ul>
</div>

JavaScript

ui-sortableに指定した値(sortableOptions)にオプションを設定します。

var myAppModule = angular.module('app', ['ui.sortable'])
myAppModule.controller('ctrl', function($scope, $timeout) {
	$scope.items = ['クザク', 'ランタ', 'ハルヒロ', 'ユメ', 'メリイ', 'シホル'];
	$scope.sortableOptions = {
		axis: 'y', // 縦方向のみの移動にする
		cursor: 'move', // カーソルの変更
		update: function() { // 移動後に発火
			$timeout(function() {
				console.log($scope.items);
			});
		}
	};
});

オプション設定のデモページ
オプションについて詳しくは、jQuery UIのSortable Widgetのオプションをご確認ください。
　

ドラッグ＆ドロップの対象を変更する

移動する要素はliのままで、ドラッグ＆ドロップの対象要素をli内の一部にしてみます。

HTML

.handleを対象にしてみます。

<div ng-controller="ctrl">
	<ul ui-sortable="sortableOptions" ng-model="items">
		<li ng-repeat="item in items"><div class="handle"></div>{{ item }}</li>
	</ul>
</div>

CSS

.handle {
	display: inline-block;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	margin-right: 5px;
	background: #666666;
}

JavaScript

オプションのhandleを設定します。

var myAppModule = angular.module('app', ['ui.sortable'])
myAppModule.controller('ctrl', function($scope, $timeout) {
	$scope.items = ['クザク', 'ランタ', 'ハルヒロ', 'ユメ', 'メリイ', 'シホル'];
	$scope.sortableOptions = {
		handle: '.handle'
	};
});

ドラッグ＆ドロップの対象を変更するデモページ
　

スマートフォンに対応する

jQuery UI Touch Punchを使用します。
基本的には読み込みにjQuery UI Touch Punchを追加するだけで大丈夫なはずです。

<script src="jquery.ui.touch-punch.min.js"></script>

スマートフォン対応のデモページ

【参考サイト】

• AngularJSで、リストをドラック&ドロップで入れ替える為のメモ – Qiita
• [AngularJS] UI.Sortable を使ったドラッグ＆ドロップ UI の構築 ｜ Developers.IO
• Sortable Widget | jQuery UI API Documentation
• iPhone/iPadでjQuery UIのsortable,resizeableなどに対応する | RaQoolスタッフブログ