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);
}
相关推荐
Ralph_Y几秒前
多重继承与虚继承
开发语言·c++
今晚务必早点睡12 分钟前
写一个Python接口:发送支付成功短信
开发语言·python
weixin_5841214318 分钟前
vue内i18n国际化移动端引入及使用
前端·javascript·vue.js
jghhh0121 分钟前
基于C#实现与三菱FX系列PLC串口通信
开发语言·算法·c#·信息与通信
ada7_23 分钟前
LeetCode(python)22.括号生成
开发语言·数据结构·python·算法·leetcode·职场和发展
喵了meme28 分钟前
C语言实战练习
c语言·开发语言
imkaifan32 分钟前
bind函数--修改this指向,返回一个函数
开发语言·前端·javascript·bind函数
xkxnq36 分钟前
第一阶段:Vue 基础入门(第 7 天)
前端·javascript·vue.js
光头闪亮亮37 分钟前
企业协同办公系统(OA)-【图标选择器】模块开发详解
前端·javascript·vue.js
pas13639 分钟前
22-mini-vue props
前端·javascript·vue.js