带弹性摇摆效果的卡片js拖拽插件swing

swing是一款拖动和拖拽卡片的交互动画接口。它可以将容器中的卡片元素拖动到容器外部，并在拖动时代有非常酷的弹性摇摆动画效果。可以通过下面的gif图片来预览一下效果。

HTML结构

html结构使用一个无序列表来作为图片栈，它被包裹在一个作为容器的div中。

<div id="viewport">
    <ul class="stack">
        <li class="clubs">♣</li>
        <li class="diamonds">♦</li>
        <li class="hearts">♥</li>
        <li class="spades">♠</li>
    </ul>
</div>
                

JAVASCRIPT

var stack,
    cards;

// Prepare the cards in the stack for iteration.
cards = [].slice.call(document.querySelectorAll('ul li'))

// An instance of the Stack is used to attach event listeners.
stack = Swing.Stack();

cards.forEach(function (targetElement) {
    // Add card element to the Stack.
    stack.createCard(targetElement);
});

// Add event listener for when a card is thrown out of the stack.
stack.on('throwout', function (e) {
    // e.target Reference to the element that has been thrown out of the stack.
    // e.throwDirection Direction in which the element has been thrown (Card.DIRECTION_LEFT, Card.DIRECTION_RIGHT).

    console.log('Card has been thrown out of the stack.');
    console.log('Throw direction: ' + (e.throwDirection == Card.DIRECTION_LEFT ? 'left' : 'right'));
});

// Add event listener for when a card is thrown in the stack, including the spring back into place effect.
stack.on('throwin', function (e) {
    console.log('Card has snapped back to the stack.');
});
                

配置

var stack,
    config;

config = {
    /**
     * 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.
     * 
     * @param {Number} offset Distance from the dragStart.
     * @param {HTMLElement} element Element.
     * @return {Number}
     */
    throwOutConfidence: function (offset, element) {
        return Math.min(Math.abs(offset) / element.offsetWidth, 1);
    }
};
stack = stack = Swing.Stack(config);
                

所有的配置参数都是可选的。

方法

var stack,
    card;

stack = stack = Swing.Stack();
card = stack.createCard(HTMLElement);
                

将卡片拖拽到容器外

可以使用card.throwOut(x, y)方法来将卡片拖拽到容器外。你可已设置卡片的拖拽方向，例如：

card.throwOut(Card.DIRECTION_LEFT, 0);
card.throwOut(Card.DIRECTION_RIGHT, 0);
                

如果想各种拖拽行为各不相同，可以把y参数设置为一个随机值。

事件监听

事件监听可以使用 on 方法附加到Swing.Stack或Swing.Card上。

var stack,
    card;

stack = stack = Swing.Stack();

card = stack.createCard(HTMLElement);

card.on('throwout', function () {});
stack.on('throwout', function () {});
                

事件对象

事件侦听器是用一个参数eventobject调用：

var stack;

stack = stack = Swing.Stack();

stack.on('throwout', function (eventObject) {});
                

更多资料请参考：https://github.com/gajus/swing