All geek questions in one place

Ability to drag and drop multiple items on a web page using jQuery

I am building a web application with HTML5, CSS3 and jQuery, jQuery UI and jQuery Mobile. Now I have a small 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 that need to be dragged and dropped. Now I'm testing this on my iPad, and only one image is dragged right away. But the iPad must support up to 11 fingers, so why is this impossible and what can I do to solve this problem? Or does it work with your multi-touch devices (iPhone, iPad, Android mobile phones or multi-touch display) and am I doing something wrong (settings) → http://jsbin.com/ayoba4/2 ?

Thanks in advance and best regards.

+4
source share
3 answers

You can do this, but you will need to do this without using jQuery draggable (). The way I did this is to use ontouchstart and ontouchmove, since these events give you an x, y array of the current event, read the Safari docs .

+2
source

See the 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, after which you can debug your application? First you need to be sure that your browser supports multitouch, then you can look at jQuery plugins for this.

0
source

JQuery Mobile is still in Alpha, so it's best to wait until they can implement this functionality. Or you can click on the jQuery-Mobile forum and ask them yourself;).

0
source

Source: https://habr.com/ru/post/1332651/

More articles:


All Articles