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

2016.09.18

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

サンプルコード

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

1
2
3
4
<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を指定します。

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

JavaScript

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

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

オプションの設定

HTML

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

1
2
3
4
5
<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)にオプションを設定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
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を対象にしてみます。

1
2
3
4
5
<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

1
2
3
4
5
6
7
8
.handle {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px;
    background: #666666;
}

JavaScript

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

1
2
3
4
5
6
7
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を追加するだけで大丈夫なはずです。

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

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

　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031