html 卡片拖动自动排列,vue卡片拖拽、自动排列交换位置、拖拽数据存取
this.$set(this.linkArr[index],'name',“小王”);
这是这次系列文章的第一篇,我自己封装了一个用vue实现的拖动卡片组件,并且发布到npm,详细地记录下来了整体制作过程。总共有三篇文章,介绍组件的制作思路和遇到的问题,以及在发布到npm上并下载使用的过程中,发生了什么问题并如何解决。
第二篇为组件的实现思路以及遇到的问题
第三篇为将组件打包并上传至npm,如何实现按需加载和下载后使用的问题
这是vue实现的拖动卡片组件,主要实现了:
拖动卡片与其他卡片的位置更换,并且其他卡片根据拖动的位置自动顺移,位置数据实时更新
拖动的时候可使用鼠标滚动
卡片根据数据生成,所有参数和内容都是可以自定义的,方便应用于不同场景
不同操作的事件都可获取到,拖动后的位置数据会实时更新
可以全局安装和按需加载
如何使用?
下载carddragger
npm install carddragger
全局安装
在你vue项目的入口js文件中使用,vue-cli生成的项目一般为main.js文件
import {installCardDragger} from 'carddragger'Vue.use(installCardDragger)
按需加载
在组件中直接import
import { cardDragger } from 'carddragger'exportdefault{
components:{
cardDragger,
}
}
使用示例
1.基础使用:
data() {return{
cardList: [{
positionNum: i,
name:"演示卡片"+i,
id:"card"+i,
}],
}
}
}
2.完整示例:
参照源码仓库中的examples
将整个项目clone下来,npm install+npm run serve即可看到完整示例
Props(参数)
属性
说明
类型
默认值
data
必填,需要传入的卡片数据,具体格式请看下方解释
Array
-
colNum
卡片排列的列数
Number
2
cardOutsideWidth
卡片外部需要占据的宽度(包括无内容部分)
Number
590
cardOutsideHeight
卡片外部需要占据的高度(包括无内容部分)
Number
380
cardInsideWidth
卡片的宽度
Number
560
cardInsideHeight
卡片的高度
Number
320
detectDistance
卡片拖动的时候,会触发交换位置的最小距离
Number
50
data格式示例:
卡片的内容根据data数据生成或自定义
:data="cardList":colNum="4":cardOutsideWidth="300":cardInsideWidth="260":cardOutsideHeight="310":cardInsideHeight="240"
/>
data(){return{
cardList: [
{
positionNum:2,
name:"测试卡片2",
id:"card2",
}
]
}
}
}
属性
说明
类型
默认值
id
必填,设置卡片的id作为唯一识别
String
-
positionNum
必填,设置卡片位置,从1开始依次递增
Number
-
name
选填,设置卡片的标题名称
String
'默认标题'
componentData
选填,设置卡片的内容为组件数据,如果此参数具有数据的话,则slot传入的数据失效
Array
-
Slot(插槽)
首先先介绍一下,卡片内容分为上下两部分:
上部分为卡片的标题栏,并且拖拽事件只有点击上部分才触发
下部分为卡片的内容
两个部分都是可以进行自定义内容及样式的。若不添加的自定义内容的话,标题栏和内容都是默认背景为白色,显示data中的name。若添加了自定义内容则背景需要自己设置。
标题栏插槽
内容插槽
你也可以
//省略部分代码,加载你的组件
import exampleChild1 from "./childComponent/exampleChild1"cardList: [
{
positionNum:1,
name:"演示卡片1",
id:"card1",
OtherData:exampleChild1//OtherData这个是你自己定义的属性,注意不可与componentData属性名字重复
}
]
关于内容我做了另外一个判断,你可以将需要的组件放在data的componentData属性里面,内容会自动读取componentData的数据。当然你直接都使用slot就可以忽略这个属性。
import exampleChild1 from "./childComponent/exampleChild1"
//省略部分代码
cardList: [
{
positionNum:1,
name:"演示卡片1",
id:"card1",
componentData:exampleChild1//直接设置即可使用
/*componnetData传入的组件,可传入两个我定义好的Props
animationState:{
类型:Boolean,
功能:首次加载卡片的时候为true,之后为false
}
itemData:{
类型:Object,
功能:传入组件数据
}*/}
]//在子组件中使用props即可使用
props:{
animationState:{
type:Boolean,default:true},
itemData:{
type:Object
}
}
渲染优先级:data的componentData > slot > 默认内容
Events(事件)
startDrag
事件作用:
在点击卡片顶部标题栏的时候,触发此函数
事件参数:
startDrag(event,id)
第一个参数event,是点击事件的原生event
第二个参数id,是选中的卡片的id
swicthPosition
作用:
在拖动一个卡片到另外一个卡片的位置的时候,触发此事件
事件参数:
swicthPosition(oldPositon,newPositon,originItem)
第一个参数oldPositon,是卡片原来的位置号码
第二个参数newPositon,是卡片需要交换的位置号码
第三个参数originItem,是卡片交换完成后的数据
finishDrag
事件作用:
拖拽完成松开鼠标后,触发此事件
事件参数:
swicthPosition(oldPositon,newPositon,originItem)
第一个参数oldPositon,是卡片原来的位置号码
第二个参数newPositon,是卡片需要交换的位置号码
第三个参数originItem,是卡片交换完成后的数据
html 卡片拖动自动排列,vue卡片拖拽、自动排列交换位置、拖拽数据存取相关推荐
- Android 拖拽控件交换位置
距离上次写博客已快有一月,中间也动过几次写博客的心思,但却因为懒,耽搁了下来. --萧洛 在网上搜寻了许久,实在是没有找到可用的demo,无奈只好自己写 ...
- 用js仿探探拖拽卡片的效果、飞卡片的效果,感觉挺酷,最后有美女看哦!程序员就是可以为所欲为!
目录 前两天在网上看到一个用vue写飞卡片的,觉得很有意思,我就自己想写一个,就花了点时间搞了一下,做的不好望大家多多指教. 两个主要的功能: 先看看效果: 首先要做一个盒子,然后生成几张卡片放到这个 ...
- Vue进阶(幺陆叁):vue项目启动后自动打开页面并设置默认浏览器
文章目录 一.修改默认浏览器 二.vue 项目启动自动打开页面 三.拓展阅读 以windows 系统为例,操作方法如下: 一.修改默认浏览器 设置谷歌浏览器为默认浏览器. 1.首先打开"开始 ...
- vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
表头主要复杂在: 1,有三层,一层是大类,第二层是具体项,第三层是标准值/对比值 2,首列和末尾列是一层 3,整个表格的维度是根据数据的输入自己生成,也就是动态的 下面是在 vue + eleUI 中 ...
- QN模块java下载_QN卡片版app下载-QN卡片版下载v35 安卓版-西西软件下载
QN卡片版app让你能够自己进行应用转生并完成Xposed框架的安装,从而让你能够更为深度的优化手机中的各种主题系统,让你的手机美化更出色,喜欢的朋友们赶快下载QN卡片版开始体验吧! QN卡片版软件介 ...
- 使用Vue做一个可自动拼图的拼图小游戏(一)
背景以及最终效果 随着几个项目的提测,也闲下来了,恰好玩了一把拼图游戏,于是突发奇想打算自己写一个试试. 在线体验 实现的功能有: 普通拼图的功能 自动拼图 本部分是这篇文章的第一部分,主要讲的是实现 ...
- 卡片布局 java_Java Swing CardLayout卡片布局的实现示例
1. 概述 CardLayout,卡片布局管理器.它将容器中的每个组件看作一张卡片,一次只能看到一张卡片,容器则充当卡片的堆栈,默认显示第一张卡片. CardLayout 构造方法: // 创建一个间 ...
- 怎么解决卡片混乱,没法识别卡片型号问题?
应用场景: 怎么解决卡片混乱,没法识别卡片型号问题? 卡片制作工厂,芯片代理商,一卡通系统商,卡厂,标签厂,客户提供的芯片多了,或者混在一起了,没法筛选出来,分不清楚哪些是m1卡,哪些是desfire ...
- [vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗?
[vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗? 自动刷新页面并不是vue-cli的功能,而是webpack的hot-module-replacement-plug ...
最新文章
- c#知识点——数据库
- 优胜教育暴雷之后,线下一对一还是门好生意吗?
- 蓝桥杯C++ AB组辅导课 第二讲 二分与前缀和 Acwing
- 遮挡摄像头 判断_长治一学校门口树枝遮挡信号灯,危险!
- 语音社交产品,安全合规“防坑指南”!
- 汇编访问计算机端口,汇编总结(2):中断、端口、直接定址表
- 开机动画适配方案_2020 年 4 月前 App 启动画面、屏幕调整需按要求适配,否则存拒审风险!...
- uva10405-最长公共子序列
- [Ajax]ajax学习与理解
- STM32--MPU内存保护单元(二)
- RhinoMock异常ExpectationViolationException以及解决
- TSDF算法笔记(转)
- 实验三:从整理上理解进程创建、可执行文件的加载和进程执行进程切换,重点理解分析fork、execve和进程切换...
- oracle 12cora 03113,Oracle12.2 ORA-03113
- linux的kvm技术,虚拟化技术KVM的搭建
- http: s18.me/ios.html,Public Key Infrastructure Configuration Guide, Cisco IOS XE Release 3S
- 苹果iWork,看上去很美
- 转载--video标签在微信内置浏览器和QQ浏览器(手机端)的怪异现象
- PMP证书容易考吗?
- 【面试总结】面试前不得不刷一下的硬核总结。