HAMMER - Swipe on Element With Class

by bizamajig

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>
<h2>Hammer.js</h2>
<div class="container" id="holder">
    <div class="swipe-area">
        <div class="swipe-block">
            Swipe me!
        </div>
    </div>
</div>

CSS

body {
}

.swipe-block{
    position:relative;
    top:50px;
    left:50px;
    width:140px;
    height:140px;
    background-color:#81d096;
    border:solid 1px #808080;
    text-align:center;
    box-shadow:2px 2px 2px #bebebe;
}

.swipe-area{
    border:1px solid #000000; 
    height:500px;
    width:100%;
}

JavaScript

var $element = $( '.swipe-block' );
    var element = $element[0];
    Hammer( element ).on( 'click swipeleft swiperight', function( e ) {
        console.log( e.type );
        var newPosition = $element.css( 'left' ) - 10;
        $element.animate({ 'left': newPosition + 'px' }, 'slow' );
    });