16

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

此致。

4

5 回答 5

24

试试这个库

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

只需按照以下简单步骤在您的 jQuery UI 应用程序中启用触摸事件：

  1. 在您的页面上包含 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>

  2. 在 jQuery UI 之后和首次使用之前包括 Touch Punch。

    请注意，如果您使用 jQuery UI 的组件，则必须在 jquery.ui.mouse.js 之后包含 Touch Punch，因为 Touch Punch 会修改其行为。

    <script src="jquery.ui.touch-punch.min.js"></script>

  3. 没有 3. 只需按预期使用 jQuery UI 并在手指触摸时观看它的工作。

    <script>$('#widget').draggable();</script>
于 2012-01-15T22:15:17.203 回答
5

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

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

于 2011-01-03T13:24:05.360 回答
3

jQuery 1.9 将为您做到这一点。

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

于 2011-08-30T18:56:16.243 回答
3

我想它看起来像这样

$(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();
        });
    });
于 2010-12-20T10:16:24.413 回答
0

你应该去看看 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 ] );
        }
    });
于 2010-12-21T16:10:08.307 回答