使用 jQuery 在网页上拖动多个元素的可能性
我使用 HTML5、CSS3 和 jQuery、jQuery UI 和 jQuery Mobile 创建一个 Web 应用程序。 现在我有一个小例子（例如：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>
所以我有两个应该可以拖动的图像。现在我在 iPad 上进行了测试，一次只能拖动一张图像。但是 iPad 应该最多支持 11 个手指，那么为什么不可能，我该怎么做才能解决这个问题呢？ 或者它是否适用于您的多点触控设备（iPhone、iPad、Android 手机或多点触控显示屏），而我做错了什么（设置）-> http://jsbin.com/ayoba4/2 ？
预先感谢您&此致。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你可以做到这一点，但你必须在不使用 jQuery 的draggable() 的情况下做到这一点。我的方法是使用 ontouchstart 和 ontouchmove，因为这些事件为您提供当前事件的 x,y 数组，请阅读 Safari 文档。
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.
请参阅这篇文章 http://www.crunchgear.com/2009/06/30/be-still-my-heart-multi-touch-tab-switching-in-firefox/ 并尝试在 Firefox 中激活多点触控，然后你可以调试你的应用程序吗？您首先需要确定您的浏览器支持多点触控，然后您可以查看 jQuery 插件来实现这一点。
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.
JQuery Mobile 仍处于 Alpha 阶段，因此您最好的选择是等待他们实现该功能。或者您可以访问JQuery-Mobile 论坛并亲自询问他们;)。
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 ;).