swipeTo

swipeTo is a jQuery plugin that emulate the native swipe to action feature upon a list on mobile phones

Usage

DOM

<div class="list">
    <div class="item">
        <a href="#" class="item-swipe">Item</a>
        <div class="item-back">
            ...
        </div>
    </div>
    ...
    <div class="item">
        <a href="#" class="item-swipe">Item</a>
        <div class="item-back">
            ...
        </div>
    </div>
</div>

Javascript

$(function() {
    $('.item-swipe').swipeTo({
        minSwipe: 100,
        angle: 10,
        wrapScroll: 'body',
        binder: true,
        swipeStart: function() {
            console.log('start');
        },
        swipeMove: function() {
            console.log('move');
        },
        swipeEnd: function() {
            console.log('end');
        },
    });
})

Options

minSwipe

You can set a minimum swipe size in pixel. If the handler is swiped for less the this option, it will be moved to the origin (to 0px)

angle

angle is an angular coefficient that prevents the swipe effect to be initialized during the vertical page scrolling. Through this option you can set a greater or lesser coefficient

wrapScroll

This option allows you to set the property "overflow: hidden" on an item during the swipe to prevent vertical scroll

binder

You can set this option as true or false to close ad open element swiped with a tap

swipeStart, swipeMove, swipeEnd

These are the callbacks that will be initialized, respectively, at the beginning, during ad at the end of the swipe effect

If you want to use default options simply place this code in your javascript file

$(function() {
    $('.item-swipe').swipeTo();
})