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);
}
相关推荐
tang777899 分钟前
爬虫如何绕过绕过“5秒盾”Cloudflare:从浏览器指纹模拟到Rust求解之不完全指南
开发语言·爬虫·rust·cloudflare
Yuer202513 分钟前
什么是 Rust 语境下的“量化算子”——一个工程对象的最小定义
开发语言·后端·rust·edca os·可控ai
2501_9481953415 分钟前
RN for OpenHarmony英雄联盟助手App实战:符文配置实现
javascript·react native·react.js
hqwest16 分钟前
码上通QT实战26--系统设置01-系统设置布局
开发语言·qt·qss·qt基础控件·qt布局控件·qt表格控件
薛定谔的猫198217 分钟前
llama-index Embedding 落地到 RAG 系统
开发语言·人工智能·python·llama-index
rocky19127 分钟前
网页版时钟
前端·javascript·html
jghhh011 小时前
传递对准MATLAB仿真程序
开发语言·matlab
一只小阿乐1 小时前
vue-web端实现图片懒加载的方
前端·javascript·vue.js
2501_944521002 小时前
rn_for_openharmony商城项目app实战-商品评价实现
javascript·数据库·react native·react.js·ecmascript·harmonyos
编程武士2 小时前
Python 各版本主要变化速览
开发语言·python