类似Tinder和探探的卡片效果的组件，社区中已经非常多了。我这一版除了可以实现和他们一样的效果外。还增加了飞卡的效果，就是类似我的女神邱淑贞这样。

可以将卡片朝任意拖拽方向飞出去，必须得帅是不是！

下面来说说我的实现思路

绝对原创，如有雷同，纯属巧合

先叠起来

其实最早实现这个效果，我是在2018年的时候，在weex上实现过一版。原帖请看这里：https://zhuanlan.zhihu.com/p/37482853

咱们这次不要求在weex里可用，所以叠起来非常简单。

首先让三个卡片按照近大远小的原则分别设置设置z-index，宽和高，比如每一层卡片的宽和高比上一层卡片要缩小20个像素（还有一种做法是通过zoom或者scale来设置远处卡片的缩小级别）。然后加入绝对定位position:absolute和z-index就可以将卡片层叠起来了。

拖动第一张卡

因为只有第一张卡片可以拖动，所以我们只要监听第一张卡片的touchstart,touchmove,touchcancel,touchend四个事件即可。

拖动的时候需要注意，在touchstart的时候记录一下手指按下的位置，在touchmove时要减去这个位置，看上去就是点哪儿从哪儿拖。

touchStart:function(e){var curTouch=e.touches[0];this.startLeft=curTouch.clientX-this.left;this.startTop=curTouch.clientY-this.top;
}
touchMove:function(e){var curTouch=e.touches[0];this.left=curTouch.clientX-this.startLeft;this.top=curTouch.clientY-this.startTop;
}

飞出去

要实现这个效果，需要用到一些数学公式。

计算卡片当前拖拽的坐标和起始坐标的夹角

var angle=Math.atan2((当前坐标.y-起点坐标.y), (当前坐标.x-起点坐标.x));

飞出去的落点x轴坐标通过计算angle的余弦值再乘以力度得出

this.left=Math.cos(angle)*this.throwDistance;

飞出去的落点y轴坐标通过计算angle的正弦值再乘以力度得出

this.top=Math.sin(angle)*this.throwDistance;

这里咱们做得再完善一些，在拖动结束时去判断一下当前拖动的距离是否足够触发飞卡效果。如果不触发飞卡效果，则触发回位效果。这样的话也可以防止用户误操作。

//计算两点之间的直线距离
getDistance:function(x1, y1, x2, y2) {var _x = Math.abs(x1 - x2); var _y = Math.abs(y1 - y2); return Math.sqrt(_x * _x + _y * _y);
}var distance=this.getDistance(0,0,this.left,this.top);
if(distance>this.throwTriggerDistance){this.makeCardThrow();
}else{this.makeCardBack();
}

下层的卡片上推

上推其实很简单，一开始的时候，我就定义了四张（不是3张吗？怎么变4张了）卡片的大小和位置。

当第一张卡飞出去后

第2张卡片变更为原本第1张卡片的位置和大小

this.width2=this.cardWidth;
this.height2=this.cardHeight;
this.left2=0;
this.top2=0;

第3张卡片变更为原本第2张卡片的位置和大小

this.width3=(this.cardWidth-this.leftPad*2);
this.height3=(this.cardHeight-this.topPad*2);
this.left3=this.leftPad;
this.top3=(this.topPad*3);

第4张卡片原本是透明的，现在变为第3张卡片的位置和大小

this.width4=(this.cardWidth-this.leftPad*4);
this.height4=(this.cardHeight-this.topPad*4);
this.left4=this.leftPad*2;
this.top4=(this.topPad*6);
this.opacity4=1;

我把阴影效果先去掉，大家观察一下这个细节

重置所有卡片

底层的卡片上推和第一张卡片的飞出效果是同时进行的，由css的transition来控制。不过时间是我们设定好的，所以只要在上推和飞出的动画时间结束后，我们重置一下所有4张卡片的大小和位置即可。

this.onThrowStart();
setTimeout(function(){that.isThrow=false;that.isAnimating=false;that.onThrowDone();that.resetAllCard();
},400);

这里需要注意，所有四张卡片都需要瞬间完成重置，所以这步之前应该禁用掉transition动画。

组件化

为了适应各种使用场景，我们要将这个效果封装一下。

//提供几个事件，分别是拖动时，拖动结束，飞卡结束，飞卡失败（回位）
@onDragMove='onCardDragMove'
@onDragStop='onCardDragStop'
@onThrowDone='onCardThrowDone'
@onThrowFail='onCardThrowFail'//参数就不细说了，都能看明白
:cardWidth="200"
:cardHeight="200"
cardBgColor="#fff"
:leftPad="10"
:topPad="6"
:borderRadius="8"
:throwTriggerDistance="100"
dragDirection="all"
:hasShadow="false"
:hasBorder="true"

提供三个slot，你可以非常方便的往卡片里塞内容

//firstCard，secondCard，thirdCard
<slot name="firstCard"></slot>

现在来模仿几个效果

某乎的推荐回答

@onDragMove='onCardDragMove'
@onDragStop='onCardDragStop'
@onThrowDone='onCardThrowDone'
:cardWidth="300"
:cardHeight="120"
:throwTriggerDistance="100"
dragDirection="horizontal"
:hasShadow="true"

仅允许水平拖动

由于改变宽高会导致文字换行变化，也许卡片用缩放会更好一些吧

探探的效果

实现探探效果的核心是监听卡片拖动的位置

onCardDragMove(obj){if(obj.left<-10){this.actionName="不喜欢";}else if(obj.left>10){this.actionName="喜欢";}else{this.actionName="";}
}

源码仓库

https://github.com/ezshine/ezflycard

之后抽空再实现一个vue3的版本吧~

关注大帅搞全栈

欢迎拍砖，一起探讨更优雅的实现

2020更新，Vue模仿探探拖拽卡片的效果相关推荐

Android仿探探卡片拖拽,Vue 仿探探拖拽卡片的效果
原标题:Vue 仿探探拖拽卡片的效果已更新Vue3版,请给前端大全发送关键字vue3仿探探获取Vue3版类似 Tinder 和探探的卡片效果的组件,社区中已经非常多了.我这一版除了可以实现和他 ...
用js仿探探拖拽卡片的效果、飞卡片的效果，感觉挺酷，最后有美女看哦！程序员就是可以为所欲为！
目录前两天在网上看到一个用vue写飞卡片的,觉得很有意思,我就自己想写一个,就花了点时间搞了一下,做的不好望大家多多指教. 两个主要的功能: 先看看效果: 首先要做一个盒子,然后生成几张卡片放到这个 ...
【Vue版】实现拖拽、排序效果（注意，这个方法在chrome谷歌浏览器上面不适用，dragend会情不自禁触发drag事件先执行，有点像浏览器的一个bug）
<divclass='dragged':index="$index"draggable='true'@dragstart="dragstart"@drag ...
基于 Spring Boot + Vue 实现的可视化拖拽编辑的大屏项目
大家好,今天给小伙伴们分享一个基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目: 简介这个是一个开源的一个BI平台,酷炫大屏展示,能随时随地掌控业务动态,让每个决策都有数据支撑 ...
Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操 ...
vue+sortable实现表格拖拽
vue+sortable实现表格拖拽前言: 支持 vue3.0 支持表格拖拽支持自定义拖拽 sortable官网一.下载 sortable npm install sortablejs --sa ...
Vue+el-tree，元素拖拽时出现禁用图标，请看解决办法
项目需求:vue+el-tree实现节点拖拽到指定div播放视频: 问题:当节点拖拽时, 出现禁用图标: 一开始以为将禁用图标改变样式或隐藏就可以,一番尝试后, 发现这个图标可能是浏览器默认的, 经过 ...
vuedraggable嵌套块拖拽_Vue 基于 vuedraggable 实现选中、拖拽、排序效果
今天有个朋友说要做个效果:Vue实现拖拽排序,要有 checked,输出结果是排序后的,要全选,未选中的不能拖动. 其实我之前基于 Sortable 做过一个类似的效果.也给他看过了,没看太明白,他就 ...
Unity UGUI基础之 Scroll View/Scroll Rect 的简单使用，并取消拖拽(滑动内容)效果，拖拽只在Scrollbar 上起作用
Unity UGUI基础之 Scroll View/Scroll Rect 的简单使用,并取消拖拽(滑动内容)效果,拖拽只在Scrollbar 上起作用目录 Unity UGUI基础之 Scro ...

2020更新，Vue模仿探探拖拽卡片的效果