VueSwing是一个基于Vue.js的卡片堆叠拖拽效果组件。可以用于创建类似于Tinder的滑动卡片效果。它基于swing.js插件，能够制作出在界面上拖拽卡片到不同位置的炫酷效果。
使用方法
安装
如果您想使用VueSwing卡片堆叠拖拽组件，首先您需要安装它，命令如下：
npm install --save vue-swing
使用
全局引用
// main.js
import VueSwing from 'vue-swing'
Vue.component('vue-swing', VueSwing)
局部使用
// helloworld.vue
<vue-swing
@throwout="throwout"
@throwin="throwin"
:config="config"
>
<div class="box">Throw me!</div>
</vue-swing>
import VueSwing from 'vue-swing'
export default {
name: 'App',
components: { VueSwing },
...
}
配置参数
VueSwing卡片堆叠拖拽组件的config配置参数由下面的一些选项：
isThrowOut：在拖动结束事件中调用。确定元素是否被扔出堆栈。当throwOutConfidence等于1时，元素被视为被扔出。allowedDirections：卡片可以被扔出的方向的数组。默认值：[VueSwing.Direction.DOWN, VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT, VueSwing.Direction.UP]。throwOutConfidence：在拖动移动事件中调用。返回0到1之间的值，表示扔出条件的完整性。原始卡片位置和元素宽度的绝对距离的比率。throwOutDistance：当卡片添加到堆栈时调用。将卡片扔到距离堆栈的偏移量。该值是minThrowOutDistance和maxThrowOutDistance之间的随机数。minThrowOutDistance：当throwOutDistance未被覆盖时有效。默认值：450。maxThrowOutDistance：当throwOutDistance未被覆盖时有效。默认值：500。rotation：在拖动移动事件中调用。确定元素的旋转。旋转等于水平和垂直偏移量的比例乘以最大旋转常量。maxRotation：当旋转未被覆盖时有效。默认值：20。transform：在拖动移动事件和每次物理求解器触发时调用。使用CSS变换来转换元素位置和旋转。
时间
VueSwing卡片堆叠拖拽组件的可用事件有：
- throwout：当卡片被扔出堆栈时触发。
- throwoutend：当卡片被扔出堆栈并且动画结束时触发。
- throwoutdown：在VueSwing.Direction.DOWN方向上的throwout事件的简写。
- throwoutleft：在VueSwing.Direction.LEFT方向上的throwout事件的简写。
- throwoutright：在VueSwing.Direction.RIGHT方向上的throwout事件的简写。
- throwoutup：在VueSwing.Direction.UP方向上的throwout事件的简写。
- throwin：当卡片被扔回堆栈时触发。
- throwinend：当卡片被扔回堆栈并且动画结束时触发。
- dragstart：Hammer panstart事件。
- dragmove：Hammer panmove事件。
- dragend：Hammer panend事件。
- destroyCard：当card.destroy调用stack.destroyCard时触发。
