用js仿探探拖拽卡片的效果、飞卡片的效果，感觉挺酷，最后有美女看哦！程序员就是可以为所欲为！

目录

前两天在网上看到一个用vue写飞卡片的，觉得很有意思，我就自己想写一个，就花了点时间搞了一下，做的不好望大家多多指教。

两个主要的功能：

先看看效果：

首先要做一个盒子，然后生成几张卡片放到这个盒子里面

然后用js给卡片设置样式，有几个要注意的地方

根据拖拽的方向，来处理动画，横向就设置left属性，纵向则设置top属性。

超过一定范围就结束动画，然后将当前移动的卡片转到队列的的第一个位置，再调用reset函数，就会重新设置好卡片的位置。

代码

来几个美女看一下吧，不知合大家口味不？

给个三连吧，哈哈！

1.空白的地方点击最上面开始移动卡片，然后这个卡片会回到最下面，同时其他卡片往上移动。

2.拖动卡片超过多少范围会飞出去(上、下、左、右四种方向)--拖动中间的卡片也可以。

第一次用视频做图片，做的不好，哈哈！

1.从下往上每个卡片的宽度加了12px，高度不动；

2.margin-top和margin-left每个增加了6px；

3.每个单独设置了颜色，为了好看；

4.封装了reset函数，初始的时候调用，当移动动画完成后，再次调用，可以重新排列好盒子（只需要把队列中卡片的顺序调换既即可）。