Databases
StackOverflow2013
Postsdbo
POjQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
    text
    copied!<p>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:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt; &lt;title&gt;Drag - Test&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.4.4.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"&gt;&lt;/script&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;div style="width:500px;height:500px;border:1px solid red;"&gt; &lt;img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/200px-JQuery_logo.svg.png" class="draggable" alt="jQuery logo" /&gt; &lt;img src="http://upload.wikimedia.org/wikipedia/en/a/ab/Apple-logo.png" class="draggable" alt="Apple Inc. logo" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $(".draggable").draggable(); }); &lt;/script&gt; &lt;/html&gt; </code></pre> <p>Here you can see the live example: <a href="http://jsbin.com/igena4/" rel="noreferrer">http://jsbin.com/igena4/</a></p> <p>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:</p> <pre><code>... onDragStart: function(event) { // stop page from panning on iPhone/iPad - we're moving a note, not the page event.preventDefault(); ... } </code></pre> <p>But the problem is for me, how can I include this into my jQuery? Where do I get <code>event</code>?</p> <p>Best Regards.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload