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);
}
相关推荐
BD_Marathon2 分钟前
Vue3_列表渲染
前端·javascript·vue.js
知其然亦知其所以然3 分钟前
为什么说 String 是 JavaScript 中“最安静却最危险”的类型
前端·javascript·程序员
yongui478345 分钟前
基于C# WinForm开发的固定资产管理系统
开发语言·c#
阿蒙Amon8 分钟前
C#每日面试题-装箱和拆箱
开发语言·c#
天下一般9 分钟前
go语言设计模式<一>模板方法
开发语言·设计模式·golang
南山安11 分钟前
React 学习:父传子的单项数据流——props
javascript·react.js·前端框架
这个需求建议不做15 分钟前
pdf.js(pdfdist)踩坑workerSrc报错pdf.worker.mjs无法正确获取
开发语言·javascript·pdf
leiming617 分钟前
C++ 类模板对象做函数参数
开发语言·c++·算法
最贪吃的虎18 分钟前
网络是怎么传输的:从底层协议到浏览器访问网站的全过程剖析
java·开发语言·网络·http·缓存
云栖梦泽19 分钟前
鸿蒙应用全流程上线实战:从合规到运营的闭环落地
开发语言·鸿蒙系统