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);
}
相关推荐
宠..4 分钟前
使用纯代码设计界面
开发语言·c++·qt
froginwe115 分钟前
SQL ALTER 语句详解
开发语言
半梅芒果干12 分钟前
vue3 网站访问页面缓存优化
前端·javascript·缓存
ALex_zry13 分钟前
内核开发者的视角:C与Rust在系统编程中的哲学与实践
c语言·开发语言·rust
u***451614 分钟前
Windows安装Rust环境(详细教程)
开发语言·windows·rust
友友马14 分钟前
『QT』窗口 (二) - 深入剖析 QDialog 对话框机制与内存管理
开发语言·qt
TracyCoder12315 分钟前
Java后端Redis客户端选型指南
java·开发语言·redis
筱砚.18 分钟前
【C++——文件操作案例】
开发语言·c++
王大宇_19 分钟前
word对比工具从入门到出门
前端·javascript
Zfox_24 分钟前
【Go】 协程和 channel
开发语言·后端·golang