Home/ Questions/Q 7087521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:41:03+00:00

I use jQuery, jQuery UI and jQuery mobile to build a web application for

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0