2020-11-19に更新

Vue.Draggable をスマホでも使う時のアレコレ

Vue

Vueでドラッグ&ドロップの何かしらを作ろうとした時に便利なVue.Draggableですが、
これまたスマホ対応している最中に困ったことがあったのでメモ。

困ったこと1:スクロールしようとするとドラッグ&ドロップされてしまう

特にオプションなどの設定をせずデフォルトのままやると、リスト内の要素全体がドラッグ&ドロップできてしまうので、
スマホだとうまくスクロールができない。

<div id="app">
 <draggable tag="ul">
   <li v-for="item, index in items" :key="item.id">
     {{item.name}}
    </li>
 </draggable>
</div>
new Vue({
  el: "#app",
  components: {
   'draggable': draggable,
  },
  data: {
    items:[]
  },

  created() {
    for (var i = 0; i <= 30; i++) {
        this.items.push({id: i+1, name: `リスト${i + 1}`})
    }
  }
});

image

困ったこと2:要素の中のクリックイベントが動かない(Androidのみ?)

例えば、
image

のように、削除ボタンをリストの中に入れて、
ボタンクリックで削除処理が行われる…みたいなときに、
ボタンをクリックしても何も起こらない。
※自分はAndroidのみで確認。PC、iosは動く

解決策

2つとも同じ方法で対処。

draggableタグにoptionsを設定して、
ドラッグ&ドロップができる領域を指定してあげる。

まずは以下のようにドラッグ&ドロップ可能にする要素を追加。
任意の名前でclassを付けておく。 今回はclass="handle"とした。

<div id="app">
 <draggable tag="ul">
   <li v-for="item, index in items" :key="item.id">
     <!-- ↓追加 -->
     <span class="handle">●</span>
     {{item.name}}
     <button>
       削除
     </button>
    </li>
 </draggable>
</div>

image
この●をクリックしているときだけドラッグ&ドロップ出来るようにする。

draggableのoptionsを以下のように設定

<draggable tag="ul" :options="{handle: '.handle'}">
...
</draggable>

これで、.handle要素をクリックorタップしたときのみドラッグ&ドロップが可能になり、
スマホでのスクロールやボタンのクリックも問題なく動くようになった。

いちおうここまでのサンプルを置いておきます。
https://jsfiddle.net/mimimimimi/vx1ksm8c/8/

参考

Vue.Draggableでドラッグ領域を指定する方法
The click event bound to the drag element using vue-draggable is invalid on Android phones

どうでもいい余談

解決した日に気づいたけど、Youtubeのプレイリストの中身の順番を変える時とかも、同じ様にアイコンをタップしないとドラッグできないようになっていた!
こういう普段何気なく使っているところにヒントが隠されてたりするんだな~と思ったり…。

ツイッターでシェア
みんなに共有、忘れないようにメモ

みみみみみ

2歳と2ヶ月くらいの赤ちゃんです。

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント