安装
npm install vuedraggable
导入
在你需要用到的vue页面导入
注意要以component的形式导入
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
list: [
{id:1, name: "Java"},
{id:2, name: "Python"},
{id:3, name: "PHP"},
{id:4, name: "C"}
]
}
},
简单使用
# draggable要包裹你的容器
<draggable v-model="list">
# transition-group可以实现分组，可以不使用
<transition-group>
# 到这一层的容器都可以实现拖拽了
<el-card v-for="element in list" :key="element.id" class="box-card">
<div class="element">
<span>{{element.name}}</span>
</div>
<div class="del-button">
<el-button icon="el-icon-close" circle size="mini" @click="delClass"></el-button>
</div>
</el-card>
</transition-group>
</draggable>
演示demo
![]()
请添加图片描述
请添加图片描述
