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>