Onsen UI V2対応はこちらから。


※Onsen UI + AngularJSを使用。
以下のファイルを準備する。
jquery-3.1.1.min.js
jquery-ui.min.js
jquery.ui.touch-punch.min.js
④jquery-ui.min.css(②zipに同梱)
jsフォルダに上記①~③ファイルとapp.jsを配置する。
cssフォルダに上記④ファイルとstyle.cssを配置する。

$scope.tableに初期データを設定し、ons-listで一覧を表示する。
ons-list-itemをドラッグ&ドロップし、[Check Table]ボタンを押下すると、コンソールに並び替えた$scope.tableの内容が表示される。
———-
ルメール
戸崎
川田
デムーロ
福永

2016-11-17-20-42-44 2016-11-17-20-45-21

index.html

app.js

ons-list-itemの高さが45px(奇数)だと、ドラッグ&ドロップの際に毎回ズレが生じるため、44pxに変更している。
(jquery-ui.min.jsの処理で高さの1/2を算出する処理があるため。)

style.css

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