前の投稿 (link) で HTML の要素に draggable 属性を付ければドラッグできると気楽に喜んでいたけど、残念ながらタッチデバイスではドラッグできなかった。 iPhone と iPad の Saferi、Android の Chrome、どれも駄目だった。

タッチデバイスでドラッグしたいならタッチ系のイベントを拾って自前で処理する必要があるらしい。 イベントは MDN Web Docs にも記載されている。

Fliz のプロパティ (link) にも以下がある。

  • onTouchCancel
  • onTouchEnd
  • onTouchMove
  • onTouchStart

こうなるとマウス操作も含めて draggable 属性に頼らずに自前でやったらどうなるのか、というのを知っておきたい。 ということで、積読したままだった「入門GUI Webブラウザで作る本格インタラクション」 (link) の「第4章 ドラッグ＆ドロップ 並び替え入門」を読んだ。 書かれていることは大体理解できた。だけど、実際に自分でやろうと思うと煩雑だろうし、詰まる箇所が多そう。

もっと簡単なデモの短いコードで載せてくれている方もいる。(link)

あと、タッチデバイス向けの polyfill もある。

やり方はいろいろあるのだけど、ドラッグ中の反応やドロップの挙動を作り込んでいくと、結局、どこかで「入門GUI Webブラウザで作る本格インタラクション」のようになっていきそう。