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);
}
相关推荐
Tomorrow'sThinker几秒前
篮球裁判犯规识别系统(四) foul_fn函数 上
java·前端·javascript
wregjru6 分钟前
【读书笔记】Effective C++ 条款3:尽可能使用const
开发语言·c++
kylezhao20199 分钟前
C#手写串口助手
开发语言·c#
Kyln.Wu12 分钟前
【python实用小脚本-292】[HR揭秘]手工党点名10分钟的终结者|Python版Zoom自动签到+名单导出加速器(建议收藏)
开发语言·python·swift
普通网友13 分钟前
PictureSelector 相册全白不显示问题
java·开发语言
普通网友15 分钟前
用 Next.js 15 做图片查看网站:图片双击放大的交互坑与修复
开发语言·javascript·交互
瞎子拍照15 分钟前
echarts自定义主题样式与组件配置、数据滚动条和数据自动轮播功能
前端·javascript·echarts
独自破碎E18 分钟前
kafka中的时间轮实现
java·开发语言
程序员阿鹏22 分钟前
如何保证写入Redis的数据不重复
java·开发语言·数据结构·数据库·redis·缓存
JAY_LIN——828 分钟前
字符串函数(strncpy/cat/cmp、strstr、strtok、strerror)
c语言·开发语言