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);
}
相关推荐
大尚来也21 小时前
超越“传参”:HTTP GET与POST的深度辨析与场景选型指南
开发语言
大鹏说大话21 小时前
破局与重构:微服务架构的演进之路、核心挑战与基石组件
开发语言
undeflined21 小时前
EnvManage - 多环境开发代理管理工具
前端·javascript·node.js
程序员敲代码吗21 小时前
进程与线程:操作系统中的核心组件
java·开发语言
Java面试题总结21 小时前
java面试题及答案(基础题122道)
java·开发语言·jvm·spring·spring cloud·golang·java-ee
三小河21 小时前
从零实现ollama本地大模型可视化+内网穿透
前端·javascript·面试
Cg1362691597421 小时前
JS-对象-array数组
开发语言·前端·javascript
pupudawang21 小时前
Java进阶——IO 流
java·开发语言·python
古译汉书21 小时前
【数据结构算法】二分查找
c语言·开发语言·数据结构·c++·算法
逆境不可逃21 小时前
【从零入门23种设计模式19】行为型之观察者模式
java·开发语言·算法·观察者模式·leetcode·设计模式·动态规划