一、安裝

npm安裝

npm i -S vuedraggable

import draggable from 'vuedraggable'export default {  ...  components: {    draggable,  }  ...};

<template>  <div class="wrap">    <draggable>      <transition-group>        <div class="item" v-for="(item, index) in list" :key="index">          {{ item }}        </div>      </transition-group>    </draggable>  </div></template><script>import draggable from "vuedraggable";export default {  name: "App",  data() {    return {      list: [1, 2, 3, 4, 5, 6, 7, 8, 9],    };  },  components: {    draggable,  },};</script>

如果需要拖拽動畫效果的話，只要加上animation屬性就行

<template>  <div class="wrap">    <draggable animation="300">      <transition-group>        <div class="item" v-for="(item, index) in list" :key="index">          {{ item }}        </div>      </transition-group>    </draggable>  </div></template>