jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?

StackOverflow https://stackoverflow.com/questions/4488601

Question

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.

Was it helpful?

Solution

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:

  1. 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>

  2. 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>

  3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

    <script>$('#widget').draggable();</script>

OTHER TIPS

I found a solution which is working on Desktop browser and iOS Safari on iPad and iPhone: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

You only have to download and integrate the JavaScript file, that's it.

I suppose it'd look like this

$(document).bind("dragstart", function(event, ui){
  event.preventDefault(); 
  //return false;//edited
  });

I'm not sure if it should be document or just 'body'

EDIT

I don't know where you took that code sample from, but it seems to always block any dragging. Try if this helps - it should prevent bubbling up, so if scrolling works with the document node - the event shouldn't get there. [I still can't try it on apples]

$(document).ready(function() {
        $(".draggable").draggable();
        $('body>div').bind("dragstart", function(event, ui){
        event.stopPropagation();
        });
    });

jQuery 1.9 will do this for you.

Here's a link to the RC: http://blog.jqueryui.com/2012/08/jquery-ui-1-9-rc/

You should simply go look at jquery's Doc http://jqueryui.com/demos/draggable/#events

You callback for the start event should be hook when you call the draggable method, as with every other jQuery, there is always a param where you can pass an objects which contains the callbacks. Try calling preventDefaut in the start callback.

$( "#draggable" ).draggable({
        start: function(e) {
            e.preventDefault();
            counts[ 0 ]++;
            updateCounterStatus( $start_counter, counts[ 0 ] );
        },
        drag: function() {
            counts[ 1 ]++;
            updateCounterStatus( $drag_counter, counts[ 1 ] );
        },
        stop: function() {
            counts[ 2 ]++;
            updateCounterStatus( $stop_counter, counts[ 2 ] );
        }
    });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top