jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
I use jQuery, jQuery UI and jQuery mobile to build a web application for iPhone / iPad. Now I create images and they should be draggable, so I did this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Drag - Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
</head>
<body>
<div>
<div style="width:500px;height:500px;border:1px solid red;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/200px-JQuery_logo.svg.png" class="draggable" alt="jQuery logo" />
<img src="http://upload.wikimedia.org/wikipedia/en/a/ab/Apple-logo.png" class="draggable" alt="Apple Inc. logo" />
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$(".draggable").draggable();
});
</script>
</html>
Here you can see the live example: http://jsbin.com/igena4/
The problem is, that the whole page want to scroll. I searched in Apple's HTML5 examples and found this to prevent the scrolling of the page, so that the image is draggable:
...
onDragStart: function(event) {
// stop page from panning on iPhone/iPad - we're moving a note, not the page
event.preventDefault();
...
}
But the problem is for me, how can I include this into my jQuery? Where do I get event?
Best Regards.
Answer
Try this library
https://github.com/furf/jquery-ui-touch-punch
Just follow these simple steps to enable touch events in your jQuery UI app:
Include jQuery and jQuery UI on your page.
<script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>Include Touch Punch after jQuery UI and before its first use.
Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.
<script src="jquery.ui.touch-punch.min.js"></script>There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.
<script>$('#widget').draggable();</script>