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
[html]













Sortable Test




{{item.name}}


Check Table




[/html]

app.js
[javascript]
“use strict”;
var app = ons.bootstrap(“myApp”, [“onsen”]);
app.controller(“page1Controller”, [“$scope”, function($scope) {
$scope.table = [
{ id: “1”, name: “戸崎”, color: “#8888ff” },
{ id: “2”, name: “ルメール”, color: “#88ff88” },
{ id: “3”, name: “デムーロ”, color: “#ff8888” },
{ id: “4”, name: “川田”, color: “#ffff88” },
{ id: “5”, name: “福永”, color: “#ff88ff” }
];
ons.ready(function() {
$(“#sort-list”).sortable({
axis: “y”,
tolerance: “pointer”,
update: function(e, ui) {
var arrayId = $(“#sort-list”).sortable(“toArray”);
var table = [];
for (var i = 0; i < arrayId.length; i++) { for (var j = 0; j < arrayId.length; j++) { if (arrayId[i] == $scope.table[j].id) { table.push($scope.table[j]); break; } } } $scope.table = angular.copy(table); } }); $("#sort-list").disableSelection(); }); $scope.$on("$destroy", function(e) { $scope.table = []; }); $scope.checkTable = function() { console.log("----------"); for (var i = 0; i < $scope.table.length; i++) { console.log($scope.table[i].name); } }; }]); [/javascript] ※ons-list-itemの高さが45px(奇数)だと、ドラッグ&ドロップの際に毎回ズレが生じるため、44pxに変更している。
(jquery-ui.min.jsの処理で高さの1/2を算出する処理があるため。)

style.css
[css]
#sort-list ons-list-item {
max-height: 44px;
}
#sort-list ons-list-item:hover {
cursor: move;
}
[/css]

Recommended Posts