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);
}
相关推荐
独自破碎E6 小时前
Java是怎么实现跨平台的?
java·开发语言
老前端的功夫6 小时前
TypeScript 全局类型声明:declare关键字的深度解析与实战
linux·前端·javascript·ubuntu·typescript·前端框架
墨有6667 小时前
C++ string 部分功能详解:迭代器、初始化与常用函数
开发语言·c++
EndingCoder7 小时前
TypeScript 入门:理解其本质与价值
前端·javascript·ubuntu·typescript·node.js
Evand J7 小时前
【MATLAB例程】三维环境下,EKF融合INS与DVL的核心程序,用于惯导和速度传感器的数据融合滤波。附下载链接
开发语言·matlab
枫叶丹47 小时前
【Qt开发】Qt系统(二)-> 事件分发器
c语言·开发语言·数据库·c++·qt·系统架构
独自破碎E7 小时前
Leetcode1438绝对值不超过限制的最长连续子数组
java·开发语言·算法
2501_946244787 小时前
Flutter & OpenHarmony OA系统弹窗对话框组件开发指南
javascript·flutter·microsoft
澜莲花7 小时前
python图色之opencv基础---验证码实战
开发语言·python·opencv
沐知全栈开发7 小时前
Numpy 数组操作
开发语言