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);
}
相关推荐
机器视觉知识推荐、就业指导6 小时前
Qt 和 C++,是不是应该叫 Q++ 了?
开发语言·c++·qt
lichenyang4536 小时前
从零开始构建 React 文档系统 - 完整实现指南
前端·javascript·react.js
比特森林探险记6 小时前
Hooks、状态管理
前端·javascript·react.js
m0_748229996 小时前
ThinkPHP快速入门:从零到实战
c语言·开发语言·数据库·学习
liu****6 小时前
三.Qt图形界面开发完全指南:从入门到掌握常用控件
开发语言·c++·qt
布茹 ei ai6 小时前
Python屏幕监视器 - 自动检测屏幕变化并点击
开发语言·python
小龙报7 小时前
【C语言进阶数据结构与算法】单链表综合练习:1.删除链表中等于给定值 val 的所有节点 2.反转链表 3.链表中间节点
c语言·开发语言·数据结构·c++·算法·链表·visual studio
比特森林探险记7 小时前
组件通信 与 ⏳ 生命周期
前端·javascript·vue.js
黎雁·泠崖7 小时前
Java抽象类与接口:定义+区别+实战应用
java·开发语言
海绵宝龙7 小时前
Vue中nextTick
前端·javascript·vue.js