vuedraggable拖拽框架

第一步:安装vuedraggable依赖

复制代码
npm install vuedraggable --save-dev

第二步:引入组件

javascript 复制代码
import draggable from 'vuedraggable';

第三步:注册组件

javascript 复制代码
components: {
    draggable
},

第四步:使用组件

javascript 复制代码
<draggable group="people"
    v-model="fileData"
    animation="500"
    chosen-class="chosen"
    @change="changeEvent"
    @start="drag=true"
    @end="drag=false">
    <transition-group>

    </transition-group>
</draggable>

第五步:定义drag变量

javascript 复制代码
drag: false

第六步:定义chang方法

javascript 复制代码
changeEvent (val) {
    console.log('值发生改变', val);
}
相关推荐
胖咕噜的稞达鸭12 分钟前
自定义shell命令行解释器自制
java·开发语言
草莓熊Lotso12 分钟前
Git 分支管理:从基础操作到协作流程(本地篇)
大数据·服务器·开发语言·c++·人工智能·git·sql
报错小能手14 分钟前
C++异常处理 终极及总结
开发语言·c++
全马必破三17 分钟前
CSS 和 JS 如何阻塞浏览器渲染 DOM
javascript
c***V3231 小时前
Vue优化
前端·javascript·vue.js
努力往上爬de蜗牛2 小时前
react native真机调试
javascript·react native·react.js
y***86694 小时前
TypeScript在Electron应用中的使用
javascript·typescript·electron
zy happy6 小时前
若依 vue3 报错:找不到模块“@/api/xxxx/xxxxx”或其相应的类型声明。。Vue 3 can not find mod
前端·javascript·vue.js
tobebetter95276 小时前
How to manage python versions on windows
开发语言·windows·python
meichaoWen6 小时前
【Vue3】vue3的全面学习(一)
前端·javascript·学习