Featured post
html - jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();? -
i use jquery, jquery ui , jquery mobile build web application iphone / ipad. create images , should draggable, 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 can see live example: http://jsbin.com/igena4/
the problem is, whole page want scroll. searched in apple's html5 examples , found prevent scrolling of page, image draggable:
... ondragstart: function(event) { // stop page panning on iphone/ipad - we're moving note, not page event.preventdefault(); ... }
but problem me, how can include jquery? event
?
best regards.
try library
https://github.com/furf/jquery-ui-touch-punch
just follow these simple steps enable touch events in jquery ui app:
include jquery , jquery ui on 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 , before first use.
please note if using jquery ui's components, touch punch must included after jquery.ui.mouse.js, touch punch modifies behavior.
<script src="jquery.ui.touch-punch.min.js"></script>
there no 3. use jquery ui expected , watch work @ touch of finger.
<script>$('#widget').draggable();</script>
- Get link
- X
- Other Apps
Comments
Post a Comment