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

I use jQuery, jQuery UI and jQuery mobile to build a web application for iPhone / iPad. Now I create images and they should be draggable, so I did this:

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

Here you can see the live example: http://jsbin.com/igena4/

在这里你可以看到现场的例子：http：//jsbin.com/igena4/

The problem is, that the whole page want to scroll. I searched in Apple's HTML5 examples and found this to prevent the scrolling of the page, so that the image is draggable:

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

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

But the problem is for me, how can I include this into my jQuery? Where do I get event?

但问题是对我来说，如何将其包含在我的jQuery中？我在哪里举办活动？

Best Regards.

最好的祝福。

5 个解决方案

#1

Try this library

试试这个库

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

Just follow these simple steps to enable touch events in your jQuery UI app:

只需按照以下简单步骤在jQuery UI应用中启用触摸事件：
Include jQuery and jQuery UI on your page.

在您的页面上包含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>
Include Touch Punch after jQuery UI and before its first use.

在jQuery UI之后和第一次使用之前包括Touch Punch。

Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

请注意，如果您使用的是jQuery UI的组件，则必须在jquery.ui.mouse.js之后包含Touch Punch，因为Touch Punch会修改其行为。
<script src="jquery.ui.touch-punch.min.js"></script>
There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

没有3.只需按预期使用jQuery UI，只需轻轻一按即可观看它。
<script>$('#widget').draggable();</script>

#2

I found a solution which is working on Desktop browser and iOS Safari on iPad and iPhone: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

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

You only have to download and integrate the JavaScript file, that's it.

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

#3

I suppose it'd look like this

我想它看起来像这样

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

I'm not sure if it should be document or just 'body'

我不确定它应该是文件还是只是'身体'

EDIT

编辑

I don't know where you took that code sample from, but it seems to always block any dragging. Try if this helps - it should prevent bubbling up, so if scrolling works with the document node - the event shouldn't get there. [I still can't try it on apples]

我不知道你从哪里获取代码示例，但似乎总是阻止任何拖动。尝试这有用 - 它应该防止冒泡，所以如果滚动与文档节点一起工作 - 事件不应该到达那里。 [我仍然无法在苹果上尝试]

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

#4

jQuery 1.9 will do this for you.

jQuery 1.9将为您完成此任务。

Here's a link to the RC: http://blog.jqueryui.com/2012/08/jquery-ui-1-9-rc/

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

#5

You should simply go look at jquery's Doc http://jqueryui.com/demos/draggable/#events

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

You callback for the start event should be hook when you call the draggable method, as with every other jQuery, there is always a param where you can pass an objects which contains the callbacks. Try calling preventDefaut in the start callback.

当你调用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 ] );
        }
    });

#1