VueSwing | 一款基于Vue.js的卡片堆叠拖拽效果组件

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时触发。

github网址：https://github.com/goweiwen/vue-swing