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);
}
相关推荐
neter.asia4 分钟前
C# 窗体应用程序嵌套web网页,基于谷歌浏览器内核(含源码)
开发语言·c#
2301_8091774721 分钟前
sqoop,flume草稿
开发语言
潜意识起点36 分钟前
Java数组:静态初始化与动态初始化详解
java·开发语言·python
点云SLAM1 小时前
C++创建文件夹和文件夹下相关操作
开发语言·c++·算法
2301_809177471 小时前
2025.01.15python商业数据分析
开发语言·python
卓大胖_1 小时前
Next.js 新手容易犯的错误 _ 性能优化与安全实践(6)
前端·javascript·安全
CodeClimb1 小时前
【华为OD-E卷 - 猜字谜100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
_小柏_1 小时前
C/C++基础知识复习(46)
c语言·开发语言·c++
SomeB1oody1 小时前
【Rust自学】6.4. 简单的控制流-if let
开发语言·前端·rust
明月逐人归4641 小时前
输出语句及变量定义
开发语言·python