Kendo Mobile - Touch Widget Swipe

by kendomobile

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">

<!-- Demo created for the book: Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API.
http://www.packtpub.com/building-mobile-applications-with-kendoui-html5/book -->

<div data-role="view" data-init="viewInit">
        <div id="parentDiv" 
              style="height: 300px; width: 300px;
                     background-color: darkgreen;">

            <div style="height: 200px; width: 200px;
                 background-color: white;"                  
                id="touchableDiv">
            </div>
        </div>
    <div id="eventLog">        
    </div>
    
    </div>

JavaScript

var app = new kendo.mobile.Application(document.body);

function viewInit(e){
    
    $('#touchableDiv').kendoTouch({        
        enableSwipe:true,
        swipe:swipeEvent,
        minXDelta: 50,
        maxYDelta:40,
        maxDuration:2000
        
        
    });
    
}
 
  
function swipeEvent(e){
                 console.log(e);
    $('#eventLog').append('Swipe registered....' + 
                          'Direction: ' + e.direction + '<br/>');
    
                    
}