開発

ドラッグ&ドロップで並び替えができるJavaScriptライブラリSortableにはIonic1系AngularJS版も存在した!

投稿日:

angular-legacy-sortable

それまではIonic1系でドラッグ&ドロップによる並び替えを実現するために下記ライブラリを使用していました。

ng-sortable

縦か横に並ぶだけのレイアウトならこれでも問題なかったのですが、今回は左から横に並んで次行に続くという複数行レイアウトのため、ちょっと厳しいかもしれません。

それに4年くらい更新されていないので、新しいライブラリを探すことにしました。

Sortable

少し調べてみると、SortableというJavaScriptライブラリがよく使われているみたいです。

Sortable

検索するとjQuery UI版の情報が多かったのでjQuery必須かと思いきや、本家は素のJavaScriptで動作していました。

しかもサイトをよく見てみると、AngularやReact、Vue対応版まであります。Angularは2以降だけじゃなく、ちゃんと1も用意されている。

angular-legacy-sortable

「legacy」という記述があるということは、AngularJSは既に遺産とか遺物のような扱いなんですね。

使い方

これを使うには「angular-legacy-sortable」単体ではなく、元の「Sortable」も一緒に呼び出す必要があります。

npm installができない環境の人は右上の緑の「Clone or download」と書かれているボタンからそれぞれ下記2ファイルを入手します。

Sortable.min.js
angular-legacy-sortable.js

ダウンロードしたファイルをlibフォルダなどに入れてindex.htmlのhead内に下記のように記述します。

<script src="lib/Sortable-master/Sortable.min.js"></script>
<script src="lib/angular-legacy-sortablejs-master/angular-legacy-sortable.js"></script>

コントローラー側のオプション

最初にangular.moduleにng-sortableを追加します。

angular.module('myApp', ['ionic', 'ng-sortable'])

続いてコントローラー側にオプションを設定します。
※各フラグはサンプルのため、適宜変更してください

オプションについては本家にも記載がありますが、日本語では下記サイトが分かりやすかったです。

【jQueryUIを使わずにドラッグ&ドロップを実装したい】Javascriptライブラリ「Sortable」を使ってみた

テンプレート側

まずはドラッグしたままスクロールできるようにion-contentに下記のように記述しておきます。

<ion-content overflow-scroll="true">

次に並び替えをするアイテムの外側の要素に

<div ng-sortable="sortableConf">

のように先ほどコントローラー側で設定したオプションを呼び出します。

あとはドラッグできる要素にオプションのhandleに設定したクラスを指定。

<div class="grab-handle">

全体が掴めるようにしたい場合はng-repeatと同じdivに書いてしまっても大丈夫です。

注意が必要なのは並び替える要素をfloatで配置しているとドラッグして移動した際にうまく詰まってくれないことです。

display: inline-block;display: flex;で配置して回りにmarginを確保するのがいいかもしれません。

並び替えの保存

先ほどのオプションでは並び替えた結果が$scope.sortingResultに入ってきます。

今回は並び替えた結果をAPIに渡す必要があったため、テンプレートのdata-idに

のように書いてJSON形式のデータを作ってコントローラー、またはサービスで

という感じで配列に変換しました。

まとめ

もう誰も使っていないと思っていたIonic1系とAngularJSですが、こういったライブラリがサポートしてくれていると非常に助かります。

おかげでドラッグ&ドロップによる並び替えが無事に実装できました。

-開発
-

Copyright© Workerブログ|仕事を続けるための工夫 , 2020 All Rights Reserved Powered by STINGER.