【AngularJs】 UI.Sortable を使用したドラッグ＆ドロップでの入れ替え

ドラッグ＆ドロップでの並び替え機能を扱いたいことがあったので、UI.Sortableを使用した並び替えをメモ。

デモページ作成予定

今回作ったもの

複数のグループから、ドラッグ＆ドロップによる同じグループ内での並び替え機能。

UI.Sortableとは？

jQueryUIのSortableプラグインをAngularJS用にカスタマイズしたサブプロジェクトです。リストやテーブルといったデータの並び替えをドラッグ＆ドロップで行えるようにします。

準備するもの

JQuery
JQueryUI 1.9以上
AngularJS v1.2以上

UI.Sortable
http://angular-ui.github.io/ui-sortable/

読み込み順

<script type="text/javascript" src="../js/libs/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="../js/libs/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/libs/angular.min.js"></script>
<script type="text/javascript" src="../js/libs/sortable.min.js"></script>

ソース

JavaScript

(function() {
    'use strict';
    var myapp = angular.module('myApp', ['ui.sortable']);

    myapp.controller('SortableCtrl', ['$scope', function($scope) {
        $scope.mainGroupA = [
            {id: 1, text: 'Main A - 1'},
            {id: 2, text: 'Main A - 2'},
            {id: 3, text: 'Main A - 3'},
            {id: 4, text: 'Main A - 4'},
            {id: 5, text: 'Main A - 5'}
        ];
        $scope.mainGroupB = [
            {id: 1, text: 'Main B - 1'},
            {id: 2, text: 'Main B - 2'},
            {id: 3, text: 'Main B - 3'},
            {id: 4, text: 'Main B - 4'},
            {id: 5, text: 'Main B - 5'}
        ];
        $scope.subGroupA = [
            {id: 6, text: 'Sub A - 6'},
            {id: 7, text: 'Sub A - 7'},
            {id: 8, text: 'Sub A - 8'},
            {id: 9, text: 'Sub A - 9'}
        ];
        $scope.subGroupB = [
            {id: 6, text: 'Sub B - 6'},
            {id: 7, text: 'Sub B - 7'},
            {id: 8, text: 'Sub B - 8'},
            {id: 9, text: 'Sub B - 9'}
        ];
        $scope.tabGroup = 0;
        
        // UI.Sortableの設定
        // connectWithに入れ替え可能なグループを設定
        $scope.sortableAOptions = {
            placeholder: "sort-placeholder",
            connectWith: ".group-a"
        };
        $scope.sortableBOptions = {
            placeholder: "sort-placeholder",
            connectWith: ".group-b"
        };
    }]);
}());

HTML

<div ng-app="myApp" ng-controller="SortableCtrl" class="container clearfix">
    <div class="main-list">
        <div class="main-list-item">
            <h3>Group A</h3>
            <ul  ui-sortable="sortableAOptions" class="sortable main-sortable group-a" ng-model="mainGroupA">
                <li class="ui-state-default" ng-repeat="value in mainGroupA">{{value.text}}</li>
            </ul>
        </div>
        <div class="main-list-item">
            <h3>Group B</h3>
            <ul  ui-sortable="sortableBOptions" class="sortable main-sortable group-b" ng-model="mainGroupB">
                <li class="ui-state-default" ng-repeat="value in mainGroupB">{{value.text}}</li>
            </ul>
        </div>
    </div>
    <div class="sub-list">
        <div class="tab-switch clearfix">
            <div class="tab-switch-item" ng-class="{current: tabGroup == 0}" ng-click="tabGroup = 0">Group A</div>
            <div class="tab-switch-item" ng-class="{current: tabGroup == 1}" ng-click="tabGroup = 1">Group B</div>
        </div>
        <div class="tab-body">
            <ul ng-show="tabGroup == 0" ui-sortable="sortableAOptions" class="sortable sub-sortable group-a" ng-model="subGroupA">
                <li class="ui-state-default" ng-repeat="value in subGroupA">{{value.text}}</li>
            </ul>
            <ul ng-show="tabGroup == 1" ui-sortable="sortableBOptions" class="sortable sub-sortable group-b" ng-model="subGroupB">
                <li class="ui-state-default" ng-repeat="value in subGroupB">{{value.text}}</li>
            </ul>
        </div>
    </div>
</div>

css

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
.container {
    width: 700px;
    font-size: 17px;
    margin: auto;
}
.main-list {
    float: left;
    width: 70%;
}
.main-list-item {
    float: left;
    width: 50%;
    text-align: center;
}
.main-list-item h3 {
    margin: 5px 0;
}
.sub-list {
    float: left;
    width: 30%;
}
.tab-switch-item {
    float: left;
    width: 102px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
    background-color: #f6f6f6;
}
.tab-switch-item.current {
    background-color: #fff;
}
ul.sortable {
    margin: 0 2px;
    padding: 2px;
    float: left;
    min-height: 1.5em;
    background-color: beige;
    border: solid 1px #ddd;
    width: 95%;
}
ul.sortable li {
    list-style-type: none;
    margin: 3px;
    padding: 0.3em;
    font-size: 15px;
    font-weight: bold;
    cursor: move;
    text-align: center;
    border: 1px solid;
}
ul.sortable.group-a li {
    border-color: red;
}
ul.sortable.group-b li {
    border-color: blue;
}

参考URL

http://alphasis.info/2011/06/jquery-ui-sortable-connectwith/
http://codepen.io/thgreasi/pen/uFile
dev.classmethod.jp