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














Sortable Test







{{item.name}}







[/html]

style.css
[css]
.list-item-ghost {
}
.list-item-chosen {
opacity: 0.4;
background-color: #ccc;
}
.list-item-drag {
font-weight: bolder;
background-color: #ff8;
}
.div-drag {
position: relative;
width: 100%;
height: 100%;
text-align: center;
}
.icon-drag {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
[/css]

app.js
[javascript]
“use strict”;
var app = ons.bootstrap(“myApp”, [“onsen”]);
app.directive(“moveListItem”, [“$compile”, function ($compile) {
return {
restrict: “A”,
link: function (scope, elem, attr) {
var sortedListitem = function (e) {
if (e.oldIndex != e.newIndex) {
scope.list.splice(e.newIndex, 0, scope.list.splice(e.oldIndex, 1)[0]);
}
};
elem.ready(function () {
scope.sortable = new Sortable(elem[0], {
group: “jra”,
delay: 300, // 300ms後にドラッグを開始する
ghostClass: “list-item-ghost”, // 不要?
chosenClass: “list-item-chosen”, // 選択されたons-list-itemに設定するCSSクラス
dragClass: “list-item-drag”, // ドラッグ中のons-list-itemに設定するCSSクラス
handle: “ons-icon”, // ドラッグが有効となるタグ
onEnd: sortedListitem, // ドラッグ終了後にコールバックする関数
vertical: true // X軸の移動を無効にする
});
});
}
};
}]);
app.controller(“indexController”, [“$scope”, function ($scope) {
$scope.list = [
{ id: 1, name: “C.ルメール” },
{ id: 2, name: “M.デムーロ” },
{ id: 3, name: “戸崎圭太” },
{ id: 4, name: “福永祐一” },
{ id: 5, name: “川田将雅” },
{ id: 6, name: “田辺裕信” },
{ id: 7, name: “北村友一” },
{ id: 8, name: “松山弘平” },
{ id: 9, name: “和田竜二” },
{ id: 10, name: “内田博幸” },
{ id: 11, name: “石橋脩” },
{ id: 12, name: “藤岡佑介” },
{ id: 13, name: “岩田康誠” },
{ id: 14, name: “武豊” },
{ id: 15, name: “大野拓弥” },
{ id: 16, name: “藤岡康太” },
{ id: 17, name: “幸英明” },
{ id: 18, name: “池添謙一” },
{ id: 19, name: “北村宏司” },
{ id: 20, name: “浜中俊” }
];
}]);
[/javascript]

Recommended Posts