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-listのborder-bottomとons-list-item)のborder-bottomが重なって線が太くなるなど。
二日間もいろいろと試した結果、下記のコードになった。
「【Monaca】Onsen UI ons-list のズレをなくす」で紹介したCSSを適用することで面倒なborder-top、border-bottomの処理を軽減することができた。
また、「三」のアイコンをドラッグすることで入れ替えが行われるように変更した。
それから、style.cssでは、CSSによる変化が確認できるようにあえて色を変えているので、コードを流用する場合は注意していただきたい。
※11/22追記
iPhoneなどの高解像度のスマートフォンで動作させると、メディアクエリーを使用しているため、CSSが正常に機能しないことがわかった。
コード修正済み。
(boder-top、border-bottomを使用していない。)
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.min.js"></script> <link rel="stylesheet" href="css/jquery-ui.min.css"> <script src="js/app.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <ons-sliding-menu main-page="page1.html" swipeable="false"></ons-sliding-menu> <ons-template id="page1.html"> <ons-page ng-controller="page1Controller"> <ons-toolbar fixed-style> <div class="center">Sortable Test2</div> </ons-toolbar> <ons-list id="sort-list" model="table"> <ons-list-item ng-repeat="name in table"> <ons-row> <ons-col width="80%"> {{name}} </ons-col> <ons-col width="20%"> <ons-icon icon="ion-drag"></ons-icon> </ons-col> </ons-row> </ons-list-item> </ons-list> <ons-button ng-click="checkTable()">Check Table</ons-button> </ons-page> </ons-template> </body> </html> |
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
"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]); } }; }]); |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
/* 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; } } |
