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);
}
相关推荐
csbysj20204 分钟前
Python3 MySQL (PyMySQL) 使用指南
开发语言
derive_magic11 分钟前
wwwwwwjava
开发语言·c#
CoderYanger12 分钟前
动态规划算法-简单多状态dp问题:12.打家劫舍Ⅱ
开发语言·算法·leetcode·职场和发展·动态规划·1024程序员节
代数狂人13 分钟前
【秒懂C#14 第一章:C#简介】
开发语言·c#
一水鉴天14 分钟前
专题讨论 类型理论和范畴理论之间的关系:闭关系/闭类型/闭范畴 与 计算式(ima.copilot)
开发语言·算法·架构
敲敲了个代码16 分钟前
从零实现一个「就地编辑」组件:深入理解 OOP 封装与复用的艺术
前端·javascript·学习·面试·前端框架
南游20 分钟前
数组判断?我早不用instanceof了,现在一行代码搞定!
前端·javascript
元素之窗20 分钟前
MATLAB 的“面子工程”:一键切换数值显示风格 —— format 命令小记
开发语言·算法·matlab
JIseven24 分钟前
app页面-锚点滚动 和 滚动自动激活菜单
前端·javascript·html
June`24 分钟前
C++11新特性全面解析(二):线程库+异常体系
开发语言·c++