This is the fork of https://github.com/goweiwen/vue-swing as there are some fixes here which wasn't applied into original repository.
A Vue.js wrapper for Swing. Swing is a swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others.
npm install --save vue-swing2
import VueSwing from 'vue-swing2'
Vue.component('vue-swing', VueSwing)
<vue-swing
@throwout="throwout"
@throwin="throwin"
:config="config"
>
<div class="box">Throw me!</div>
</vue-swing>
VueSwing takes in one config
Object, which can consist of any of these keys:
Name | Description | Default |
---|---|---|
isThrowOut |
Invoked in the event of dragend . Determines if element is being thrown out of the stack. |
Element is considered to be thrown out when throwOutConfidence is equal to 1. |
allowedDirections |
Array of directions in which cards can be thrown out. | [VueSwing.Direction.DOWN, VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT, VueSwing.Direction.UP]. |
throwOutConfidence |
Invoked in the event of dragmove . Returns a value between 0 and 1 indicating the completeness of the throw out condition. |
Ration of the absolute distance from the original card position and element width. |
throwOutDistance |
Invoked when card is added to the stack. The card is thrown to this offset from the stack. | The value is a random number between minThrowOutDistance and maxThrowOutDistance . |
minThrowOutDistance |
In effect when throwOutDistance is not overwritten. |
450. |
maxThrowOutDistance |
In effect when throwOutDistance is not overwritten. |
500. |
rotation |
Invoked in the event of dragmove . Determine the rotation of the element. |
Rotation is equal to the proportion of horizontal and vertical offset times the maximumRotation constant. |
maxRotation |
In effect when rotation is not overwritten. |
20. |
transform |
Invoked in the event of dragmove and every time the physics solver is triggered. |
Uses CSS transform to translate element position and rotation. |
For more information, look at Swing's documentation
Name | Description |
---|---|
throwout |
When card has been thrown out of the stack. |
throwoutend |
When card has been thrown out of the stack and the animation has ended. |
throwoutdown |
Shorthand for throwout event in the VueSwing.Direction.DOWN direction. |
throwoutleft |
Shorthand for throwout event in the VueSwing.Direction.LEFT direction. |
throwoutright |
Shorthand for throwout event in the VueSwing.Direction.RIGHT direction. |
throwoutup |
Shorthand for throwout event in the VueSwing.Direction.UP direction. |
throwin |
When card has been thrown into the stack. |
throwinend |
When card has been thrown into the stack and the animation has ended. |
dragstart |
Hammer panstart. |
dragmove |
Hammer panmove. |
dragend |
Hammer panend. |
destroyCard |
When card.destroy calls stack.destroyCard. |
For more information, look at Swing's documentation