受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。
私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。
今回AngularJSでそのようなものを作っているんですが、明細の順番をドラック＆ドロップで入れ替えられないかというリクエストがあり、こちらを調査することに。
結論からいうとjQueryのsortableというライブラリをangularJSでも使え、このライブラリを使うことで解決しました。
インストール
|
1 |
bower install -S angular-ui-sortable --allow-root |
ソース
HTML
|
1 2 3 4 5 |
<script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/jquery-ui/jquery-ui.min.js"></script> <script src="bower_components/angular/angular.min.js"></script> … <script src="bower_components/angular-ui-sortable/sortable.min.js"></script> |
|
1 2 3 4 5 |
<tbody ui-sortable="sortableOptions" ng-model="items"> <tr ng-repeat=" item in items" class="drag-cursor" data-js="drag__handle" > <td><input type="text" ng-model="item.prop1"></td> </tr> </tbody> |
JS
|
1 2 3 4 5 6 7 8 |
//モジュールを読み込むのを忘れないようにしましょう angular.module('モジュール名', ['ui.sortable', …], function(…) ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ //sortのライブラリ $scope.sortableOptions = { 'axis ' : 'y', //縦方向移動に限定したい場合です。 }; |
これだけで基本はいけます。
なお移動時になにか動きを付けたいときは’start’:function(event,ui) {～などでトリガーを設定することができます。
参考リンク
https://github.com/angular-ui/ui-sortable (公式)
AngularJSで、リストをドラック&ドロップで入れ替える為のメモ
[AngularJS] UI.Sortable を使ったドラッグ＆ドロップ UI の構築
