ons-list-item の drag&drop

ons-list-item の Drag & Dropのサンプルです。

See the Pen ons-list-item drag&drop (jQuery UI) by senmyou (@senmyou) on CodePen.

jQuery UIのsortable機能を使っています。使用しているファイルは「jquery.min.js」、「jquery-ui.min.js」、「jquery.ui.touch-punch.min.js」です。
リストを2つ並べましたが、違いは「線(ボーダー)」だけです。ほんとは下のリストのほうがいいと思うのですが、下のリストは一番下のリストアイテムをドラッグしたとき、一番下の線が太く見えてしまうという問題があります。上のリストはたんにその応急処置的なものです。
なぜ太く見えるかというと、ドラッグ時にjQuery UIにより生成されるヘルパー用のons-list-itemがリストの一番下に配置されるため、そのひとつ前のリストアイテムに、
.list__item:last-child {
border-bottom: none;
}
が適用されず、ボーダーが引かれるからだと思われます。ヘルパー用の ons-list-item は position:absolute の指定によりドラッグポイントを追従して描画されますが、要素はドラッグ開始位置に生成されるため、一番下のリストアイテムをドラッグするとヘルパーは一番下に生成されます。

例えば、.list__item の last-childが .ui-sortable-helper のとき、そのひとつ前の要素が選択できればよさそうですが、やり方がわかりませんでした。なにかいい方法があればいいのですが。
とりあえず、ご参考まで。

ons-carouselのループ

ons-carouselでループ表示するサンプルです。

See the Pen ons-carousel loop by senmyou (@senmyou) on CodePen.

ここでは ons-carousel-item を3つ使っています。postchangeイベントハンドラで、アクティブインデックスが端にきたときに隠れている部分を書き換え、真ん中に移動し、最後に端の内容を書き換えています。私が作成したアプリでは ons-carousel-item 内にカレンダーを作成し、スワイプでカレンダーを送れるようにしました。

ところで onsen ui v1 で「setActiveCarouselItemIndex()」だった関数は onsen ui v2 で「setActiveIndex()」に名前が変わったんですね。今頃気づきました。

カレンダーのソースコード

Daily Noteのプロジェクトを整理しているときに、カレンダー作成のソースコードが流用できそうな形になっていたので抜き出してみました。リリース版ではもっと複雑怪奇になっているのですが、評価段階で作成したソースコードはわりとシンプルなのでベースにしやすいかと思います。

See the Pen wzQOKW by NORIAKI MIFUNE (@senmyou) on CodePen.

ところで、今日このソースコードをブログ上で動作させたくて、何かないかなとネットで探していたら「codepen」を紹介している記事を見つけました。それで登録して使ってみたのですが、なんかよくわからないけど、たのしいですね、これ。