Vueでドラッグ&ドロップの何かしらを作ろうとした時に便利なVue.Draggableですが、
これまたスマホ対応している最中に困ったことがあったのでメモ。
特にオプションなどの設定をせずデフォルトのままやると、リスト内の要素全体がドラッグ&ドロップできてしまうので、
スマホだとうまくスクロールができない。
<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}`})
}
}
});
のように、削除ボタンをリストの中に入れて、
ボタンクリックで削除処理が行われる…みたいなときに、
ボタンをクリックしても何も起こらない。
※自分は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>
この●をクリックしているときだけドラッグ&ドロップ出来るようにする。
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のプレイリストの中身の順番を変える時とかも、同じ様にアイコンをタップしないとドラッグできないようになっていた!
こういう普段何気なく使っているところにヒントが隠されてたりするんだな~と思ったり…。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント