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 小时前
ahooks useRequest 深度解析:一个 Hook 搞定所有请求
java·javascript
兆子龙4 小时前
React Suspense 从入门到实战:让异步加载更优雅
java·javascript
KKKK5 小时前
SSE(Server-Sent Events)流式传输原理和XStream实践
前端·javascript
子兮曰5 小时前
Humanizer-zh 实战:把 AI 初稿改成“能发布”的技术文章
前端·javascript·后端
Din6 小时前
主动取消的防抖
前端·javascript·typescript
H5开发新纪元6 小时前
Nginx 部署 Vue3 项目完整指南
前端·javascript·面试
决斗小饼干6 小时前
跨语言移植手记:把 TypeScript 的 Codex SDK 请进 .NET 世界
前端·javascript·typescript
进击的尘埃6 小时前
Vitest 浏览器模式:别再用 jsdom 骗自己了
javascript
bluceli6 小时前
JavaScript模块化深度解析:从CommonJS到ES Modules的演进之路
前端·javascript