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);
}
相关推荐
江城开朗的豌豆9 分钟前
React的渲染时机:聊透虚拟DOM的更新机制
前端·javascript·react.js
bianshaopeng10 分钟前
ubuntu go 环境变量配置
开发语言·ubuntu·golang
元清加油21 分钟前
【Goland】:协程和通道
服务器·开发语言·后端·网络协议·golang
广州智造30 分钟前
EPLAN教程:流体工程
开发语言·人工智能·python·算法·软件工程·软件构建
掘金安东尼36 分钟前
使用 Web Components 与 CSS Modules 构建原生应用架构
javascript·后端·面试
wjm04100637 分钟前
ios八股文 -- Objective-c
开发语言·ios·objective-c
小白(猿)员38 分钟前
数据结构中的列表:深度解析数组与链表的实现与抉择
开发语言
lpfasd1231 小时前
01_Go语言基础与环境搭建
开发语言·后端·golang
天天进步20151 小时前
Python实战--基于Django的企业资源管理系统
开发语言·python·django
草莓熊Lotso1 小时前
【C语言强化训练16天】--从基础到进阶的蜕变之旅:Day8
c语言·开发语言·c++·刷题·强化训练