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);
}
相关推荐
zfj3215 分钟前
vscode是js开发的,为什么能支持golang java等各种语言开发
javascript·vscode·golang
GDAL21 分钟前
Mapbox GL JS 核心表达式:`==` 相等判断完全教程
javascript·mapbox
cheems952722 分钟前
锁策略的介绍
java·开发语言
清水白石00824 分钟前
《Python × 数据库:用 SQLAlchemy 解锁高效 ORM 编程的艺术》
开发语言·python·json
风中月隐31 分钟前
C语言中以坐标的方式图解“字母金字塔”的绘制
c语言·开发语言·算法·字母金子塔·坐标图解法
Arva .36 分钟前
说说线程的生命周期和状态
java·开发语言
1001101_QIA39 分钟前
C++中不能复制只能移动的类型
开发语言·c++
炸土豆40 分钟前
防抖节流里的this传递
前端·javascript
tryxr43 分钟前
HashTable、HashMap、ConcurrentHashMap 之间的区别
java·开发语言·hash
serendipity_hky1 小时前
【go语言 | 第5篇】channel——多个goroutine之间通信
开发语言·后端·golang