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による変化が確認できるようにあえて色を変えているので、コードを流用する場合は注意していただきたい。
Continue reading