1.安装依赖

npm i -S vuedraggable

 2.引入依赖

import vuedraggable from 'vuedraggable';

3.注册组件

components: {

vuedraggable

},

4.使用

 <vuedraggable class="wrapper" v-model="list">
    <transition-group>
      <div v-for="item in list" :key="item" class="item">
        <p>{{item}}</p>
      </div>
    </transition-group>
  </vuedraggable>

问题解决：

1.提示key报错：

    给循环项每个加个key属性

2.拖拽过去又复原了：

    这情况一般是你的每一项是写死的，而非循环项，去掉vuedraggable中的v-model

 <vuedraggable class="wrapper">
      <div key="1" class="item">
        <p>1</p>
      </div>
      <div key="2" class="item">
        <p>2</p>
      </div>
  </vuedraggable>