【问题标题】:Possibility of dragging more than one element on a webpage with jQuery使用 jQuery 在网页上拖动多个元素的可能性
【发布时间】:2011-05-27 19:23:29
【问题描述】:

我使用 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

在此先感谢您并致以最诚挚的问候。

【问题讨论】:

  • 我会先看看浏览器是否支持多点触控。 Firefox 4 应该这样做,Safari 已经有一个 api。我不确定它是否存在于您的 iPad 中(我没有)。如果绝望 - 试试看这里:plugins.jquery.com/plugin-tags/multitouch 或者如果不是 - 等待 jquerymobile 支持它。
  • 嗯,jQuery mobile支持滑动和手势,但是我正在寻找两个相互独立的手指支持,所以我可以同时拖动两个或多个项目。
  • 这就是为什么我说“等待jqm支持它”。你看过插件吗?
  • 我查看了插件,但他们不支持它。而且不知道是JavaScript的问题还是浏览器本身的问题,可能是浏览器不支持?!
  • stackoverflow.com/questions/3026915/… -- 似乎可以解决单可拖动问题,但其中一个链接库可能支持多点触控拖动事件

标签: jquery html jquery-ui multi-touch jquery-mobile


【解决方案1】:

你可以这样做,但你必须在不使用 jQuery 的 draggable() 的情况下这样做。我这样做的方法是使用 ontouchstart 和 ontouchmove,因为这些事件为您提供了当前事件的 x、y 数组,请在 Safari docs 上阅读。

【讨论】:

  • 哦,听起来不错。这适用于 iPhone / iPad?它是否也适用于其他浏览器,你检查过吗?在 Android 上还是在连接到 Windows 7 的 Multi-Touch 屏幕上?因为就我而言,我必须在 iOS Safari 和多点触控屏幕上的 Firefox / Google Chrome 等浏览器中创建一个支持鼠标拖放的 Web 应用程序。但是系统怎么知道我想做一个捏/缩放手势而不是拖动?或者这不再可能了?
  • @Tim - 浏览器实际上没有 - 你有。我相信您可以从 touch(start|end|move) 事件处理程序或 preventDefault() 返回 false ,就像您将真正的浏览器事件一样,并且您可以设置其他属性...如果你最终需要推出自己的解决方案。
  • 你说的“浏览器实际上没有 - 你有”是什么意思?
  • windows 7 上的多点触控屏幕完全不同,因为这取决于它们公开的功能......
【解决方案2】:

看到这篇文章http://www.crunchgear.com/2009/06/30/be-still-my-heart-multi-touch-tab-switching-in-firefox/并尝试在Firefox中激活多点触控,然后你可以调试你的应用程序?您首先需要确定您的浏览器支持多点触控,然后您可以查看 jQuery 插件来做到这一点。

【讨论】:

【解决方案3】:

JQuery Mobile 仍处于 Alpha 阶段,因此最好的办法是等待他们实现该功能。或者您可以拨打JQuery-Mobile forum 并亲自询问他们;)。

【讨论】:

  • 不知道能不能实现,因为我觉得,浏览器一定要支持吧?!而且我不知道 Safari 是否支持这个。
猜你喜欢
  • 1970-01-01
  • 2011-12-27
  • 1970-01-01
  • 1970-01-01
  • 2010-11-21
  • 2012-04-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多