Vue.Draggableのメモ

Vue.Draggableパッケージをinstall

$ npm install --save vuedraggable

使用したいコンポーネントで呼び出す

<template>
  <div class="board-task-contents" >
    <draggable>
      <div v-for="i in 20" :key = "`${i}`" class="task-card">
        <h3>番号： {{ i }}</h3>
        <p>タスク詳細内容</p>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'TaskList',

  components: {
    draggable
  },
...

で囲まれたdiv要素がドラッグできるようになったしかも並び替えもできる。

PWA化したvueアプリでスマホのドラッグにも対応している◎

(補足)

• アニメーションつけたい v-bindオプションでanimationを指定
• スクロールができなくなる時の対処 v-bindオプションでdelayを指定

<draggable
  v-bind:options="{
    animation: 200,  //アニメーション
    delay: 50        //スクロール防止（長押しでソート）
  }"
>...

参考記事

www.kabanoki.net

sagatto.com