jQuery - iPad / iPhone 上的可拖动图像 - 如何集成 event.preventDefault();？答案

【问题标题】：jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?jQuery - iPad / iPhone 上的可拖动图像 - 如何集成 event.preventDefault();？
【发布时间】：2011-05-28 04:17:53
【问题描述】：

我使用 jQuery、jQuery UI 和 jQuery mobile 为 iPhone / iPad 构建 Web 应用程序。现在我创建了图像，它们应该是可拖动的，所以我这样做了：

<!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>

您可以在此处查看实时示例：http://jsbin.com/igena4/

问题是，整个页面都想滚动。我在Apple的HTML5示例中搜索，发现这是为了防止页面滚动，从而使图像可拖动：

...
onDragStart: function(event) {
    // stop page from panning on iPhone/iPad - we're moving a note, not the page
    event.preventDefault();
    ...
}

但问题在于我，如何将它包含到我的 jQuery 中？我在哪里可以得到event？

最好的问候。

【问题讨论】：

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

【解决方案1】：

我想应该是这样的

$(document).bind("dragstart", function(event, ui){
  event.preventDefault(); 
  //return false;//edited
  });

我不确定应该是 document 还是只是 'body'

编辑

我不知道您从哪里获取该代码示例，但它似乎总是阻止任何拖动。试试这是否有帮助 - 它应该防止冒泡，所以如果滚动适用于文档节点 - 事件不应该到达那里。 [我还是不能在苹果上试一试]

$(document).ready(function() {
        $(".draggable").draggable();
        $('body>div').bind("dragstart", function(event, ui){
        event.stopPropagation();
        });
    });

【讨论】：

两者都不起作用，请参阅jsbin.com/igena4/2 和jsbin.com/igena4/3 我不能在 iPad 中工作，我不能再用鼠标拖动普通的网络浏览器了。
好的。你能链接到你找到应该将preventDefault绑定到onDragStart的信息的地方吗？您可能需要将其绑定到特定事物，否则会产生误导。我没有触摸屏设备，所以无法通过反复试验来实现。
尝试不使用return false。我觉得太多了。
也没有return false 它不起作用。完全相同的行为：jsbin.com/igena4/5 - jsbin.com/igena4/6 不能用鼠标拖动，也不能用手指拖动。
我再问一次 - 你在哪里找到带有 onDragStart 的片段？

【解决方案2】：

你应该去看看 jquery 的文档http://jqueryui.com/demos/draggable/#events

当您调用可拖动方法时，您对 start 事件的回调应该是钩子，与其他所有 jQuery 一样，总是有一个参数，您可以在其中传递包含回调的对象。尝试在启动回调中调用 preventDefaut。

$( "#draggable" ).draggable({
        start: function(e) {
            e.preventDefault();
            counts[ 0 ]++;
            updateCounterStatus( $start_counter, counts[ 0 ] );
        },
        drag: function() {
            counts[ 1 ]++;
            updateCounterStatus( $drag_counter, counts[ 1 ] );
        },
        stop: function() {
            counts[ 2 ]++;
            updateCounterStatus( $stop_counter, counts[ 2 ] );
        }
    });

【讨论】：

我已经这样做了：start: function(event) { event.preventDefault(); } 但是没有任何效果 - 没有鼠标拖动，没有手指拖动。
看起来这是用 jqueryUI 做到这一点的方式，你只需要摆弄这个。在这里和那里添加更多preventDefaults，试着停止在不同的事件上冒泡......
您是否尝试过用一根手指按住 Ipad 滚动条并用另一根手指（另一只手）拖动？我经常在有滚动 div 的网站上使用这个技巧......
这不起作用，但我找到了解决方案，请参阅我的回答帖子。

【解决方案3】：

我找到了一个适用于 iPad 和 iPhone 上的桌面浏览器和 iOS Safari 的解决方案： http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

您只需下载并集成 JavaScript 文件即可。

【讨论】：

很高兴找到究竟是什么修复，因为它肯定应用在那里。
我认为这是通过几个 preventDefaults 完成的。我没有深入研究代码，首先我很高兴它正在工作:-)
哇，我知道你不是第一个遇到这个问题的人 :)
我看了一下代码，简直太棒了。他们为 iOS 特有的事件添加了监听器，例如 touchstart、touchmove、touchend，并将其映射到 jQuery 事件，例如 click、dlbClick、drag 等等……jQuery 的事件模型使得将新事件“映射”到旧的！他们的代码写得很好，并且带有 cmets。你应该看看它。不只是几个 preventDefaults ;) 如果您正在为 iO 构建自定义应用程序，我建议您使用正确的事件。
但我还不知道，如何实现两个或多个元素同时可拖动。我有 10 根手指，但我只能用一根来拖放。

【解决方案4】：

jQuery 1.9 会为你做到这一点。

这是 RC 的链接：http://blog.jqueryui.com/2012/08/jquery-ui-1-9-rc/

【讨论】：

如果那个文件还存在就好了 D:
你现在可以在这里试用 jquery 1.9 beta：blog.jqueryui.com/2012/06/jquery-ui-1-9-beta
触摸不是 jQuery UI 1.9 的一部分

【解决方案5】：

试试这个库

https://github.com/furf/jquery-ui-touch-punch

只需按照这些简单的步骤在您的 jQuery 中启用触摸事件用户界面应用：
在您的页面上包含 jQuery 和 jQuery UI。
<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>
在 jQuery UI 之后和首次使用之前包括 Touch Punch。

请注意，如果你使用 jQuery UI 的组件，Touch Punch 必须放在 jquery.ui.mouse.js 之后，作为 Touch Punch 修改其行为。
<script src="jquery.ui.touch-punch.min.js"></script>
没有 3. 只需按预期使用 jQuery UI，手指触摸即可观看。
<script>$('#widget').draggable();</script>

【讨论】：

+1 提到这一点，我在这方面做了很多工作，并且与 jquery ui 配合得很好。
这太酷了。它只是工作！刚刚在 Opera Mobile、Firefox/Fennec 和诺基亚 N9 默认浏览器上进行了测试。在这 3 个中，只有 Fennec 有点笨重（但仍然有效）。请参阅此处的示例：m.enux.pl/_tests/jui/demos/droppable/photo-manager.html
确保在
+1 用于触控！您只需包含该库，它就可以工作（因为可拖动性是我唯一测试过的东西）。