4

I create a web application with HTML5, CSS3 and jQuery, jQuery UI and jQuery Mobile. Now I have a little example (example: http://jsbin.com/ayoba4/2)

<!DOCTYPE html>
<html>
    <head>
        <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>
        <!-- UPDATE: I USE THIS PLUGIN: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ -->
        <meta charset=utf-8 />
        <title>Drag Test</title>
    </head>
    <body>
        <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>
    <script>
        $(document).ready(function() {
            $(".draggable").draggable();
        });
    </script>
    </body>
</html>

So I have two images which should be draggable. Now I test this on my iPad and only one image at once is draggable. But the iPad should support up to 11 fingers, so why isn't it possible and what can I do to solve this problem? Or does it work with your multitouch devices (iPhone, iPad, mobile phones with Android, or multitouch display) and I do something wrong (settings) -> http://jsbin.com/ayoba4/2 ?

Thank you in advance & Best Regards.

Tim
  • 13,228
  • 36
  • 108
  • 159
  • I would start from seeing if the browser supports multitouch. Firefox 4 is supposed to do that, Safari has an api already. I'm not sure if it's present in your iPad (I don't have one). If desperate - try looking here: http://plugins.jquery.com/plugin-tags/multitouch or if not - wait for jquerymobile to support it. – naugtur Dec 19 '10 at 13:39
  • Hm, jQuery mobile supports swipe and gestures, but I am searching for two finger support which are independent from each other, so I can drag two or more items at the same time. – Tim Dec 19 '10 at 14:21
  • That's why I said "wait for jqm to support it". Did you look at the plugins? – naugtur Dec 20 '10 at 10:13
  • I look at the plugins, but they does not support it. And I do not know if it is a problem with JavaScript or with the webbrowser itself, perhaps it is not supported by the browser?! – Tim Jan 02 '11 at 14:09
  • http://stackoverflow.com/questions/3026915/how-can-i-make-a-jquery-ui-draggable-div-draggable-for-touchscreen -- Seems to tackle single draggable, but one of the linked libraries may support multi-touch drag events – gnarf Jan 08 '11 at 06:07
  • I updated my source code, because I am using this library http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ – Tim Jan 08 '11 at 09:29

3 Answers3

2

You can do this, but you'd have to do it without using jQuery's draggable(). The way I did it was using ontouchstart and ontouchmove as these events give you an array of the x,y of the current event, read up on the Safari docs.

Ahmed Nuaman
  • 12,662
  • 15
  • 55
  • 87
  • Oh, that sounds very good. And this works with iPhone / iPad? And does it also work with other browsers, did you check this? On Android or on Multi-Touch screens connected to Windows 7? Because in my case, I have to create a web application which supports mouse drag'n'drop, in iOS Safari and for browsers like Firefox / Google Chrome on a multi-touch screen. But how does the system know, that I want to do a pinch/zoom gesture instead of dragging? Or is this then not possible any more? – Tim Jan 08 '11 at 00:34
  • @Tim - the browser actually doesn't - you do. I believe you can return false from your `touch(start|end|move)` event handlers, or `preventDefault()` just like you would a real browser event, and there are other properties you can set... That Safari docs page is pretty extensive with great code samples if you end up needing to roll your own solution. – gnarf Jan 08 '11 at 06:10
  • What dou you mean with "the browser actually doesn't - you do"? – Tim Jan 08 '11 at 09:21
  • multitouch screens on windows 7 are something totally different, as it depends what functionality they expose ... – roman Jan 09 '11 at 10:42
0

See this article http://www.crunchgear.com/2009/06/30/be-still-my-heart-multi-touch-tab-switching-in-firefox/ and try to activate multitouch in Firefox, then you can debug your application? You would first need to be certain your browser supports multitouch, then you can look at jQuery plugins for doing that.

rapadura
  • 5,242
  • 7
  • 39
  • 57
  • Yes, here is a movie: http://hacks.mozilla.org/2010/08/firefox4-beta3/ But it is not possible to drag two different elements at one time. – Tim Jan 05 '11 at 09:29
0

JQuery Mobile is still in Alpha so your best bet is to wait for them to implement that functionality. Or you can hit up the JQuery-Mobile forum and ask them yourself ;).

Kyle
  • 3,170
  • 1
  • 17
  • 20
  • I do not know if that is possible to implement, because I think, the webbrowser must support it?! And I do not know if Safari support this. – Tim Jan 05 '11 at 19:16