I am making an HTML5 app with jQuery Mobile, and I just added the touch punch capability to the app. The website (http://touchpunch.furf.com/) works perfectly in my cellphone, but when I try to apply the same techniques into my app, the draggable function does not work correctly.
Here is my head of the code, so you guys can check whether I am inserting the correct jquery sources.
<head>
<title>Parking Lot App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/florida_tech.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script> <!-- TOUCH PUNCH -->
</head>
This is the code where the content is being displayed. It just an image with 2 green blocks within a 'div'
<div data-role="content" style="margin:0px; padding:0px; border:0px">
<div id="draggable" class="ui-widget-content" style="position:relative; height: 347px">
<div style=" position: absolute; top: 0px; left: 0px">
<img src="style/pic.png" alt="Parking Lot Map"/>
</div>
<div style="background-color:green; width:17px; height:35px; z-index: 2; position: absolute; top: 31px; left: 81px ">
 
</div>
<div style="background-color:green; width:17px; height:35px; z-index: 2; position: absolute; top: 31px; left: 102px ">
 
</div>
</div>