非常酷的拖动图像小脚本ElastiStack

今天我们想分享一个小脚本,可以让你浏览一堆缩略图和一个弹性联系。想法来自这Dribbble上照片是由CreativeDash和互动基本上是拖着一个项目,它从堆栈中“释放”这似乎以一种无形的弹性连接。我们正在使用的拖拽功能大卫DeSandro Draggabilly来。

HTML结构如下:
<ul id="elasticstack" class="elasticstack">
    <li><img src="img/1.jpg" alt="01"/><h5>Saudade</h5></li>
    <li><img src="img/2.jpg" alt="02"/><h5>Tuqburni</h5></li>
    <li><img src="img/3.jpg" alt="03"/><h5>Retrouvailles</h5></li>
    <li><img src="img/4.jpg" alt="04"/><h5>Onsra</h5></li>
    <li><img src="img/5.jpg" alt="05"/><h5>Mamihlapinatapai</h5></li>
    <li><img src="img/6.jpg" alt="06"/><h5>Koi No Yokan</h5></li>
</ul>

当第一项拖,我们希望它反弹如果太接近了堆栈。这个距离可以定义变量distDragBack。时将物品消失的地区落入是设置为distDragMax定义的距离。拖动物品超出这个距离会自动释放项目从堆栈中,没有必要。这张图片展示了距离:
这是如何初始化脚本:
new ElastiStack( element, {
    // distDragBack: if the user stops dragging the image in a area that does not exceed [distDragBack]px 
    // for either x or y then the image goes back to the stack 
    distDragBack : 200,
    // distDragMax: if the user drags the image in a area that exceeds [distDragMax]px 
    // for either x or y then the image moves away from the stack 
    distDragMax : 450,
    // callback
    onUpdateStack : function( current ) { return false; }
} );