Swipe Like Effect Based On JQuery UI Draggable

August 28th, 2011 by aditia rahman / 1 Comment  

     

Swipe effect has becoming popular when mobile application usage increase, it a nice touch effect to slide between layout, and some of mobile web application framework has already have this feature for example you can see sencha touch carousel component, but I think the swipe effect can be good enough too, not only for mobile web but for web desktop too. Here I want to share a little idea creating swipe like effect based on jquery UI draggable. Basically the idea is really simple it is the combination of revert option in jquery ui draggable, jquery animation for moving an element, and mouse event for firing when the item have to swipe.

HTML
<div id="container">
    <div id="swipe_container">
        <div class="item">Item Swipe 1</div>
        <div class="item">Item Swipe 2</div>
        <div class="item">Item Swipe 3</div>
        <div class="item">Item Swipe 4</div>
        <div class="item">Item Swipe 5</div>
        <div style="clear:both"></div>
    </div>
</div>
Demo
CSS

Make sure the swipe container width equal or larger than total items width for example you have 3 item swipe with 300px width, use minimum 900px for swipe container width.

#container {
    width: 320px;
    height: 480px;
    overflow: hidden;
    border: 5px solid #0099cc;
    margin:0 auto;
}
#swipe_container {
    width: 1600px;
    background: #999;
}
.item {
    font-size: 24px;
    width: 320px;
    height: 480px;
    float: left;
    background: #e3e3e3;
}
JQuery

This jquery code will count the items inside the swipe container, this used for detecting whether it is the first item or the last item to swipe, if true, the position not change and to make it look like swiping an item, add the revent option on the draggable function.

$(document).ready(function() {
    var cont_pos = $("#swipe_container").position();
    var item_width = $(".item").width();
    var items = $("#swipe_container > div.item").length;
    var item_index = 1;
    var cont_post_temp;

    $("#swipe_container").draggable({ axis: "x", revert: true });

    function bindMouseUp() {
        $("#swipe_container").unbind('mouseup');
        cont_post_temp = $("#swipe_container").position().left;
        if (cont_pos.left > cont_post_temp && item_index != items) {
            // swipe to right
            $("#swipe_container").draggable("option", "revert", false);
            var moveLeft = cont_pos.left - cont_post_temp;
            moveLeft = Math.abs(item_width - moveLeft);
            $("#swipe_container").animate({
                left: '-=' + moveLeft
            }, 500, function() {
                $("#swipe_container").draggable("option", "revert", true);
                cont_pos = $("#swipe_container").position();
                $("#swipe_container").bind('mouseup', function() {
                    bindMouseUp();
                });
            });
            item_index++;;
        } else if (cont_pos.left < cont_post_temp && item_index != 1) {
            // swipe to left
            $("#swipe_container").draggable("option", "revert", false);
            var moveLeft = cont_post_temp - cont_pos.left;
            moveLeft = Math.abs(item_width - moveLeft);
            $("#swipe_container").animate({
                left: '+=' + moveLeft
            }, 500, function() {
                $("#swipe_container").draggable("option", "revert", true);
                cont_pos = $("#swipe_container").position();
                $("#swipe_container").bind('mouseup', function() {
                    bindMouseUp();
                });
            });
            item_index = item_index - 1;
        } else {
            // on the beginning or end item swipe
            $("#swipe_container").draggable( "option", "revert", true );
            $("#swipe_container").bind('mouseup', function() {
                bindMouseUp();
            });
        }
    }

    $("#swipe_container").mouseup(function() {
        bindMouseUp();
    });
});

In above code the swipe function is triggered on bingMouseUp, in this function I have to bind and unbind the mouse event and the revert for preventing abuse mouse event, from user. That is all I know this not perfect, like this swipe only happen when the mouse up, but when mouse leave an item it came back to previous position.

Demo
        submit to reddit Delicious

One Comment Leave a Comment Subscribe RSS

  • Gilles Bonnet says:

    To avoid the problem raised in your last sentence, just bind the mouseleave event ! Add :

    $(“#swipe_container”).mouseleave(function() {
    bindMouseUp();
    });

Leave a Comment