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);
}
相关推荐
咖啡の猫28 分钟前
搭建Python开发环境
开发语言·python
程序猿小蒜2 小时前
基于springboot的共享汽车管理系统开发与设计
java·开发语言·spring boot·后端·spring·汽车
lsp程序员0102 小时前
使用 Web Workers 提升前端性能:让 JavaScript 不再阻塞 UI
java·前端·javascript·ui
听风吟丶3 小时前
Java 8 Stream API 高级实战:从数据处理到性能优化的深度解析
开发语言·python
hygge9993 小时前
Spring Boot + MyBatis 整合与 MyBatis 原理全解析
java·开发语言·经验分享·spring boot·后端·mybatis
Run_Teenage4 小时前
C++:智能指针的使用及其原理
开发语言·c++·算法
码界奇点6 小时前
Java设计模式精讲从基础到实战的常见模式解析
java·开发语言·设计模式·java-ee·软件工程
卷福同学6 小时前
【AI编程】用Codebuddy+lighthouse开发AI年龄模拟网站
javascript·后端
四维碎片6 小时前
【Qt】配置安卓开发环境
android·开发语言·qt
源力祁老师6 小时前
Odoo 19 制造与会计集成深度解析
前端·javascript·制造