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);
}
相关推荐
方也_arkling2 分钟前
【Java-Day10】多态
java·开发语言
海鸥两三4 分钟前
基于 Vue 3 + 高德地图的网格规划系统实战(有源码)
前端·javascript·vue.js
楼田莉子5 分钟前
C++20新特性:Range库
开发语言·c++·后端·学习·c++20
念恒123068 分钟前
Python 函数完全指南:定义与调用
开发语言·python
逸A9 分钟前
某里v2反混淆 codec 化路上踩到的两个隐蔽坑:被清零的 salt 与 opaque loop bound
javascript·人工智能·目标跟踪
曹牧9 分钟前
Java:Unix时间戳
java·开发语言
丷丩13 分钟前
MapLibre GL JS第11课:获取鼠标指针坐标
前端·javascript·gis·地图·mapbox·maplibre gl js
会编程的土豆16 分钟前
Go 里的 error 接口 + 假 nil(超级重点)
开发语言·后端·golang
愿天垂怜16 分钟前
【C++脚手架】ffmpeg 库的介绍与使用
linux·服务器·开发语言·c++·ide·git·ffmpeg
并不喜欢吃鱼18 分钟前
从零开始 C++-----十一【C++ 数据结构】红黑树全解析:从定义到工程实现(一文搞定,十分详细)
开发语言·数据结构·c++