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);
}
相关推荐
java1234_小锋5 分钟前
[免费]基于Python的Flask酒店客房管理系统【论文+源码+SQL脚本】
开发语言·人工智能·python·flask·酒店客房
bubiyoushang88818 分钟前
使用MATLAB计算梁单元的刚度矩阵和质量矩阵
开发语言·matlab·矩阵
三掌柜66632 分钟前
C++ 零基础入门与冒泡排序深度实现
java·开发语言·c++
Yyyy48241 分钟前
标签Labels、Scheduler:调度器、k8s污点与容忍度
开发语言·kubernetes
来来走走43 分钟前
Android开发(Kotlin) 扩展函数和运算符重载
android·开发语言·kotlin
zz-zjx1 小时前
云原生LVS+Keepalived高可用方案(二)
开发语言·php·lvs
wuwu_q1 小时前
用通俗易懂 + Android 开发实战的方式,详细讲解 Kotlin Flow 中的 retryWhen 操作符
android·开发语言·kotlin
gihigo19981 小时前
使用JavaScript和Node.js构建简单的RESTful API
javascript·node.js·restful
一位搞嵌入式的 genius1 小时前
前端实战开发(三):Vue+Pinia中三大核心问题解决方案!!!
前端·javascript·vue.js·前端实战
网络精创大傻1 小时前
PHP 与 Node.js:实际性能对比
开发语言·node.js·php