Question

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

最诚挚的问候。

Answer 1

试试这个库

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

只需按照以下简单步骤在jQuery中启用触摸事件即可   UI应用：
在您的页面上包含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的组件，则必须在jquery.ui.mouse.js之后包含Touch Punch，如Touch Punch 修改其行为。
<script src="jquery.ui.touch-punch.min.js"></script>
没有3.只需按预期使用jQuery UI，只需用手指即可观看它。
<script>$('#widget').draggable();</script>

Answer 2

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

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

Answer 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(); }); });

Answer 4

jQuery 1.9将为您完成此任务。

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

Answer 5

您应该只看一下jquery的Doc http://jqueryui.com/demos/draggable/#events

当你调用draggable方法时，你应该挂钩start事件的回调，就像每个其他jQuery一样，总有一个param你可以传递一个包含回调的对象。尝试在开始回调中调用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 ] );
        }
    });

jQuery - iPad / iPhone上的可拖动图像 - 如何集成event.preventDefault（）;?

5 个答案: