jQuery - iPad / iPhone 上的可拖动图像 - 如何集成 event.preventDefault();？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4488601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
提问by Tim
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 中？我从哪里得到event？
Best Regards.
此致。
回答by JE42
Try this library
试试这个库
https://github.com/furf/jquery-ui-touch-punch
https://github.com/furf/jquery-ui-touch-punch
Just follow these simple steps to enable touch events in your jQuery UI app:
Include jQuery and jQuery UI on your page.
<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.
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.
<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.
<script>$('#widget').draggable();</script>
只需按照以下简单步骤在您的 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>
回答by Tim
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 文件，就可以了。
回答by thatmiddleway
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/
回答by naugtur
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 documentor just 'body'
我不确定应该是document还是只是'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();
});
});
回答by Developer IT
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.
当您调用可拖动方法时，您对 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 ] );
}
});
