jQuery Swipe To

by Marco Abate

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="list">
    <div class="item">
        <a href="http://google.com" class="item-swipe">Item 1</a>
        <div class="item-back">
            <button class="action first btn-delete" type="button"><i class="fa fa-trash-o"></i></button>
            <button class="action second btn-check" type="button"><i class="fa fa-check"></i></button>
        </div>
    </div>
    <div class="item">
        <a href="http://google.com" class="item-swipe">Item 2</a>
        <div class="item-back">
            <button class="action first btn-delete" type="button"><i class="fa fa-trash-o"></i></button>
            <button class="action second btn-check" type="button"><i class="fa fa-check"></i></button>
        </div>
    </div>
    <div class="item">
        <a href="http://google.com" class="item-swipe">Item 3</a>
        <div class="item-back">
            <button class="action first btn-delete" type="button"><i class="fa fa-trash-o"></i></button>
            <button class="action second btn-check" type="button"><i class="fa fa-check"></i></button>
        </div>
    </div>
    <div class="item">
        <a href="http://google.com" class="item-swipe">Item 4</a>
        <div class="item-back">
            <button class="action first btn-delete" type="button"><i class="fa fa-trash-o"></i></button>
            <button class="action second btn-check" type="button"><i class="fa fa-check"></i></button>
        </div>
    </div>
    <div class="item">
        <a href="http://google.com" class="item-swipe">Item 5</a>
        <div class="item-back">
            <button class="action first btn-delete" type="button"><i class="fa fa-trash-o"></i></button>
            <button class="action second btn-check" type="button"><i class="fa fa-check"></i></button>
        </div>
    </div>
    <div class="item">
        <a href="http://google.com" class="item-swipe">Item 6</a>
       ...

CSS

* {
    box-sizing: border-box;
}

body {
    margin: inherit;
}

.overflow-hidden {
    overflow: hidden;
}

.list {
    width: 100%;
    overflow: hidden;
}

.list .item {
    border-bottom: 1px solid #E1E1E1;
    position: relative;
    height: 40px;
}

.list .item .item-swipe {
    background: #ffffff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    z-index: 1;
}

.list .item a.item-swipe {
    display: block;
    height: 100%;
    position: relative;
    text-decoration: inherit;
    color: #333;
}

.list .item a.item-swipe:active {
    color: inherit;
}

.list .item .item-swipe.open {
    background: #333;
}

.list .item .item-swipe.open:before {
    content: "\f00d";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    position: absolute;
    right: 10px;
}

.list .item .item-back {
    background: #E1E1E1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    text-align: right;
}

.list .item .item-back .action {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50px;
    border: inherit;
    outline: inherit;
    color: #fff;
    padding: 0;
    font-size: 22px;
}

.list .item .item-back .action.first {
    right: 0;
}

.list .item .item-back .action.second {
    right: 50px;
}

.list .item .item-swipe.swiped {
    -webkit-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
}

.btn-delete {
    background: firebrick;
}

.btn-check {
    background: green;
}

JavaScript

/** PLUGIN SCRIPT **/
(function($) {
    $.fn.swipeTo = function(options) {

        var settings = $.extend({
            minSwipe: 100,
            angle: 10,
            wrapScroll: 'body',
            binder: true,
            swipeStart: function() {},
            swipeMove: function() {},
            swipeEnd: function() {}
        }, options);

        var start;
        var moving;
        var vertical;
        var verticalMov;
        var direction;
        var res;
        var minSwipe = settings.minSwipe;
        var moveStatus;
        var wrapScroll = $(settings.wrapScroll);
        var angle = settings.angle;
        var handler = this.selector;
        var binder = settings.binder;
        var swipeStart = settings.swipeStart;
        var swipeMove = settings.swipeMove;
        var swipeEnd = settings.swipeEnd;

        var onTouchStart = $('body').on('touchstart', handler, function(ev) {
            var that = $(this);
            var e = ev.originalEvent;
            start = e.touches[0].clientX;
            vertical = e.touches[0].clientY;
            var style = window.getComputedStyle(that.get(0));
            var matrix = new WebKitCSSMatrix(style.transform);
            moveStatus = matrix.m41;
            start = 0 - moveStatus + start;
            if (typeof swipeStart == 'function') {
                swipeStart.call(this);
            }
        });

        var onTouchMove = $('body').on('touchmove', handler, function(ev) {
            var that = $(this);
            that.removeClass('swiped')
            var e = ev.originalEvent;
            moving = e.changedTouches[0].clientX;
            verticalMov = e.changedTouches[0].clientY;
            res = start - moving;
            var horRes = vertical - verticalMov;
            var absRes = Math.abs(res);
            var absHorRes = Math.abs(horRes);
            if (res < 0) {
                direction = 'left';
                var blockLeft = true;
            }
            if (res > 0)...