记录一下vuedraggable clone的坑,获取数据
时间:2022-07-24
本文章向大家介绍记录一下vuedraggable clone的坑,获取数据,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vuedraggable 提供了一个 clone事件,这个事件会返回 克隆目标、来源、索引等相关信息。
事件名称 |
说明 |
---|---|
clone |
从一个数组拖拽到另外一个数组时触发的事件和add不同,clone是复制了数组元素 |
文档地址:点击查看
<draggable
:class="{'el-row':true,'drag-area':true,'empty':components.length==0}"
:list="components"
@add="add"
@end="end"
@clone="clone" //这里特别注意
:group="{name: 'people',pull: 'clone',put: true}"
:animation="150"
>
<ComponentRender class="col" v-for="element in components" :key="element.id" :element="element"
@select="selectComponent"></ComponentRender>
</draggable>
如果想获取克隆对象数据的事件,应该使用属性,而名称和clone一模一样
<draggable
:list="components"
@clone='cloneA'//这里获取的是个原生对象相关的
:clone='cloneB' //这里是获取的list中的某一项,可以通过加工后返回></draggable>
clone 属性事件
clone(origin) {
//这一步最关键,没处理好,后面会数据混乱
//通过转成字符串,让他变成一个新对象,不然拖拽第二个组件将会和第一个组件一模一样,改变第一个组件第二个、第三个也会跟着变动。
const data = JSON.parse(JSON.stringify(origin))
data.id = parseInt(new Date().getMilliseconds() + "" + Math.ceil(Math.random() * 100000)).toString(16);
return data
}
- Docker容器学习梳理-容器硬盘热扩容
- 检测到Loaderlock的问题
- 权威报告预测比特币在2018年“王位”不保
- Linux下FTP环境部署梳理(vsftpd和proftpd)
- Silverlight如何与JS相互调用
- Docker容器学习梳理--私有仓库Registry使用
- 从插件重构看如何提升测试质量与效率
- 巧用WinRAR+Javascript解决activeX的自动安装问题
- 在网页中实现QQ的屏幕截图功能
- Activity之间传递参数
- linux下rsync和tar增量备份梳理
- 重温Delphi之:面向对象
- Android新手之旅(15) Win7下配置遇到的问题
- 重温Delphi之:如何定义一个类
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 线性结构之栈和队列
- pyHook 转码问题-MouseSwitch() missing 8 required positional arguments...,原因及解决办法
- 将Java中的数组进行二次封装成属于我们自己的数组
- Windows 卡进程问题-请等待当前程序完成卸载或更改,轻松解决
- Netty入门之WebSocket初体验
- 如何修复无法启动的docker容器
- Kafka安装(极简版)
- parallelStream的坑,不踩不知道,一踩吓一跳
- leetcode链表之删除链表的节点
- Windows 技术篇-通过注册表查找vc运行库所在位置实战演示,通过ProductCode查看vc++运行库安装位置
- Python 库安装问题-whl is not a supported wheel on this platform.原因及解决办法
- 安装Go运行环境
- Python 语法问题-module 'pip' has no attribute 'pep425tags',告诉你如何正确查看pip支持,32位、64位查看pip支持万能方法
- 使用matplotlib绘制3D图表
- 微服务的用户认证与授权杂谈(下)