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);
}
相关推荐
1024肥宅9 分钟前
JavaScript 数组原生方法手写实现
前端·javascript·ecmascript 6
汉堡大王952723 分钟前
JavaScript类型变形记:当代码开始“不正经”地转换身份
前端·javascript
while(1){yan}26 分钟前
多线程CAS八股文
java·开发语言·面试
用户930510658222426 分钟前
自造微前端
前端·javascript
之恒君26 分钟前
寄生组合继承 vs ES6 类继承 深度对比
前端·javascript
飞Link30 分钟前
【轻量拓展区】网络 QoS 与带宽、延迟、抖动:AI 推理的性能瓶颈
开发语言·网络·人工智能
用户516816614584132 分钟前
script 标签的异步加载:async、defer、type="module" 详解
前端·javascript
m0_4711996338 分钟前
【vue】dep.notify() 是什么意思?
前端·javascript·vue.js
Haoea!40 分钟前
jkd8特性
开发语言
威风的虫42 分钟前
Vue3中的生命周期钩子函数
前端·javascript·vue.js