2年前の記事、「【Monaca】ons-list-itemをドラッグ&ドロップで並び替える」および「【Monaca】ons-list-itemをドラッグ&ドロップで並び替える・その2」で紹介した方法は、Onsen UI V1とjQueryを使用したが、今回はjQueryを使用せず、Onsen UI V2と「Sortable」を一部改造して実現してみた。



MonacaクラウドIDEで、新しいプロジェクト「Onsen UI V2 Angular 1 Minimum」を作成し、各コードを準備する。
SortableはY軸のほかにX軸の移動もできてしまうため、ons-list-itemのドラッグ&ドロップには都合が悪い。
そこで、オプションにverticalプロパティを新たに追加し、X軸のドラッグを制限するように下記コードのハイライト箇所の行を追加・変更する。

Sortable.js

index.html

style.css

app.js

【Monaca】Onsen UI V2 ons-list-itemをドラッグ&ドロップで並び替える
Tagged on: