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);
}
相关推荐
@Kerry~28 分钟前
phpstudy .htaccess 文件内容
java·开发语言·前端
CRMEB系统商城29 分钟前
CRMEB多商户系统(PHP)v3.3正式发布,同城配送上线[特殊字符]
java·开发语言·小程序·php
sali-tec1 小时前
C# 基于halcon的视觉工作流-章45-网格面划痕
开发语言·算法·计算机视觉·c#
一壶浊酒..1 小时前
python 爬取百度图片
开发语言·python·百度
机器视觉知识推荐、就业指导1 小时前
C语言中的预编译是什么?何时需要预编译?
c语言·开发语言
·心猿意码·1 小时前
C++智能指针解析
开发语言·c++
广龙宇1 小时前
【一起学Rust · 项目实战】使用getargs库来获取命令行参数
开发语言·python
沐知全栈开发2 小时前
HTML 颜色名
开发语言
WebDesign_Mu2 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
property-2 小时前
C++中#define和const的区别
开发语言·c++