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);
}
相关推荐
peiwang2455 分钟前
Linux系统中CoreDump的生成与调试
java·linux·开发语言
努力也学不会java9 分钟前
【Spring】Spring事务和事务传播机制
java·开发语言·人工智能·spring boot·后端·spring
虚行12 分钟前
WPF入门
开发语言·c#·wpf
大熊不是猫19 分钟前
PHP实现企业微信 会话存档功能
开发语言·php·企业微信
吃饺子不吃馅20 分钟前
了解微前端:为何 Web Component 是绕不开的关键技术?
前端·javascript·架构
友友马28 分钟前
『 QT 』信号-槽 补充: Qt信号槽断开连接与Lambda槽技巧
开发语言·数据库·qt
新青年57938 分钟前
Go语言项目打包上线流程
开发语言·后端·golang
学习编程的Kitty39 分钟前
JavaEE初阶——多线程(2)线程的使用
java·开发语言·java-ee
counting money40 分钟前
JAVAEE阶段学习指南
java·开发语言
colorFocus44 分钟前
都25年了,快用?.替代&&,??替代||
javascript