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);
}
相关推荐
雾岛听蓝1 小时前
进程信号机制深度解析
linux·开发语言·经验分享·笔记
踏着七彩祥云的小丑8 小时前
pytest——Mark标记
开发语言·python·pytest
Dream of maid8 小时前
Python12(网络编程)
开发语言·网络·php
小李子呢02119 小时前
前端八股CSS(2)---动画的实现方式
前端·javascript
W23035765739 小时前
经典算法:最长上升子序列(LIS)深度解析 C++ 实现
开发语言·c++·算法
Y4090019 小时前
【多线程】线程安全(1)
java·开发语言·jvm
不爱吃炸鸡柳9 小时前
Python入门第一课:零基础认识Python + 环境搭建 + 基础语法精讲
开发语言·python
minji...10 小时前
Linux 线程同步与互斥(三) 生产者消费者模型,基于阻塞队列的生产者消费者模型的代码实现
linux·运维·服务器·开发语言·网络·c++·算法
Dxy123931021610 小时前
Python基于BERT的上下文纠错详解
开发语言·python·bert