第一步 下载
npm install vue-draggable-plus --save
第二步 引入页面注册使用
<template>
<div id="app">
<h4>简易版Vue3拖拽功能【VueDraggablePlus】案例</h4>
<VueDraggable ref="el" v-model="imgList" :animation="150" style="display: flex;flex-wrap: wrap;padding: 0 10px;border: 1px solid red;" >
<div v-for="item in imgList" :key="item.id" style="border:1px solid #afa9a9;cursor: pointer;padding: 2%;margin: 3%;border-radius: 5px">
{{item.text}}
</div>
</VueDraggable>
</div>
</template>
<script>
import { VueDraggable } from 'vue-draggable-plus'
export default {
name: 'App',
components: {
VueDraggable
},
data(){
return{
imgList:[
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
],
}
}
}
</script>
第三步
保存,看效果!
完事~