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

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

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

下面来说说我的实现思路

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

先叠起来

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

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

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

拖动第一张卡

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