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


※11/22再編集
前回の「【Monaca】ons-list-itemをドラッグ&ドロップで並び替える」で記載したコードにはいくつか問題点があった。
ons-list-itemの背景色でわかりにくかったが、helper(移動中のons-list-item)のborder-topが消えたり、一番下のons-list-itemを移動させると、下から二番目のons-list-itemが下がるが、ons-listborder-bottomons-list-item)のborder-bottomが重なって線が太くなるなど。

二日間もいろいろと試した結果、下記のコードになった。
【Monaca】Onsen UI ons-list のズレをなくす」で紹介したCSSを適用することで面倒なborder-topborder-bottomの処理を軽減することができた。
また、「三」のアイコンをドラッグすることで入れ替えが行われるように変更した。
それから、style.cssでは、CSSによる変化が確認できるようにあえて色を変えているので、コードを流用する場合は注意していただきたい。

※11/22追記
iPhoneなどの高解像度のスマートフォンで動作させると、メディアクエリーを使用しているため、CSSが正常に機能しないことがわかった。
コード修正済み。
(boder-topborder-bottomを使用していない。)

index.html
[html]













Sortable Test2






{{name}}







Check Table




[/html]

app.js
[JavaScript]
“use strict”;
var app = ons.bootstrap(“myApp”, [“onsen”]);
app.controller(“page1Controller”, [“$scope”, function($scope) {
$scope.table = [
“戸崎”,
“ルメール”,
“デムーロ”,
“川田”,
“福永”
];
$scope.startIndex = 0;

ons.ready(function() {
$(“#sort-list”).sortable({
axis: “y”, // 縦方向のみ
handle: “ons-icon”, // アイコンをドラッグした場合に並び替える
tolerance: “pointer”, // タップした位置で並び替える
containment: “parent”, // ドラッグの範囲は親(ons-list)内
revert: 200,
start: function(e, ui) {
console.log(“start:” + ui.item.index());
// 開始位置を保存
$scope.startIndex = ui.item.index();
// helperのborder-top、background-colorを設定する
ui.item[0].classList.add(“item-helper”);
// placeholderを表示、border-bottomを設定する
ui.placeholder.css(“visibility”, “visible”);
ui.placeholder[0].classList.add(“item-placeholder”);
},
stop: function(e, ui) {
console.log(“stop:” + ui.item.index());
// helperのborder-top、background-colorを解除する
ui.item[0].classList.remove(“item-helper”);
// placeholderを非表示、border-bottomを解除する
ui.placeholder.css(“visibility”, “hidden”);
ui.placeholder[0].classList.remove(“item-placeholder”);
},
update: function(e, ui) {
console.log(“update:” + ui.item.index());
// 配列を入れ替える
var data = $scope.table[$scope.startIndex];
$scope.table.splice($scope.startIndex, 1);
$scope.table.splice(ui.item.index(), 0, data);
// 配列の状態を表示
$scope.checkTable();
},
change: function(e, ui) {
console.log(“change:” + ui.item.index());
},
over: function(e, ui) {
console.log(“over:” + ui.item.index());
},
out: function(e, ui) {
console.log(“out:” + ui.item.index());
}
});
$(“#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]); } }; }]); [/JavaScript] style.css
[css]
/* onsen-uiのons-list、ons-list-itemを変更 */
.list {
border-top: none;
border-bottom: none;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.list {
border: none;
}
}
.list__item {
border-top: none;
border-bottom: 1px solid #ddd;
}
.list__item:first-child {
border-top: none;
border-bottom: 1px solid #ddd;
}
.list__item:last-child {
border-top: none;
border-bottom: 1px solid #ddd;
}
.list__item:first-child:last-child {
border-top: none;
border-bottom: 1px solid #ddd;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.list__item,
.list__item:first-child,
.list__item:last-child,
.list__item:first-child:last-child,
.list__item:not(:last-child) {
border-bottom: none;
-webkit-background-size: 100% 1px;
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom;
background-image: -webkit-linear-gradient(90deg, #ddd, #ddd, #ddd);
background-image: -moz-linear-gradient(90deg, #ddd, #ddd, #ddd);
background-image: -o-linear-gradient(90deg, #ddd, #ddd, #ddd);
background-image: linear-gradient(0deg, #ddd, #ddd, #ddd);
/* background-image: -webkit-linear-gradient(90deg, #ddd, #ddd 50%, transparent 50%);
background-image: -moz-linear-gradient(90deg, #ddd, #ddd 50%, transparent 50%);
background-image: -o-linear-gradient(90deg, #ddd, #ddd 50%, transparent 50%);
background-image: linear-gradient(0deg, #ddd, #ddd 50%, transparent 50%);*/
}
}

/* sortable */
#sort-list ons-list-item {
max-height: 44px;
}
#sort-list ons-list-item:hover {
cursor: move;
}
#sort-list .item-helper {
border-top: 1px solid #f00;
background-color: #bfb;
}
#sort-list .item-placeholder {
border-bottom: 1px solid #00f;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#sort-list .item-helper {
border: none;
-webkit-background-size: 100% 1px, 100% 1px;
background-size: 100% 1px, 100% 1px;
background-repeat: no-repeat;
background-position: bottom, top;
background-image: -webkit-linear-gradient(90deg, #f00, #f00, #f00), -webkit-linear-gradient(270deg, #f00, #f00, #f00);
background-image: -moz-linear-gradient(90deg, #f00, #f00, #f00), -moz-linear-gradient(270deg, #f00, #f00, #f00);
background-image: -o-linear-gradient(90deg, #f00, #f00, #f00), -o-linear-gradient(270deg, #f00, #f00, #f00);
background-image: linear-gradient(0deg, #f00, #f00, #f00), linear-gradient(180deg, #f00, #f00, #f00);

}
#sort-list .item-placeholder {
border: none;
}
}
[/css]

Recommended Posts