Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

Vue.Draggableでドラッグ領域を指定する方法

前置き

Vue.Draggable、便利ですよね。
Sortable.jsというjavascriptライブラリを元にVueで使いやすい形で実装されています。
インストールしてdraggableタグで挟んで、modelなりcomputedなりを指定するだけでドラッグ&ドロップが利用できるリッチなUIを作ることができます。

ちょっと困った

ただ実装している中で、リストの中の要素全体がドラッグ&ドロップできてしまうと困ってしまうことがあります。
モバイルレイアウトなどで以下のようなリストを実装したいときにスクロールできなくなってしまうわけです。
スクリーンショット1.png

そんな時は

この問題はdraggableタグにoptionsを追加することで解決することが可能です。

<template>
  <draggable v-model="sampleList" :options="{handle: '.item-handle'}">
    <div v-for="item in sampleList" :key="item.order">
      <div class="sample-item">
        <span class="item-handle">::</span>
        {{item.content}}
      </div>
    </div>
  </draggable>
</template>

ちょっとした解説

加えたのは以下2点
- draggableタグに:options="{handle: '.item-handle'}"を追加
- ドラッグ&ドロップを可能とする要素を追加して、クラスに.item-handleを設定

要するにドラッグ&ドロップの取っ手(handle)を設定するイメージですね。
これで通常通りスクロールが可能となり、handleに設定した要素をクリック(or タップ)した時のみVue.Draggableが発動するようになります。
スクリーンショット2.png

まとめ

非常にシンプルな実装方法でとてもありがたいですね。
気になった点・誤った記載を見かけましたら、ご指摘いただければ幸いです。
閲覧いただき、ありがとうございました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
12
Help us understand the problem. What are the problem?