jQuery - iPad / iPhone上的可拖动图像 - 如何集成event.preventDefault（）;？ [英] jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
问题描述
我使用jQuery，jQuery UI和jQuery mobile为iPhone / iPad构建Web应用程序。
现在我创建了图片，它们应该是可拖动的，所以我这样做了：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =Content-typecontent =text / html; charset = utf-8>
< title> Drag - Test< / title>
< link rel =stylesheethref =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.pngclass =draggablealt = jQuery徽标/>
< img src =http://upload.wikimedia.org/wikipedia/en/a/ab/Apple-logo.pngclass =draggablealt =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）{
//在iPhone / iPad上平移页面停止 - 我们正在移动一个笔记，而不是页面
event.preventDefault（）;
...
}
但问题在于我，怎么可以我把这个包括到我的jQuery中？我在哪里得到事件？
最好的问候。
试试这个库
https://github.com/furf/jquery-ui-touch-punch
<只需按照以下简单的步骤在jQuery
UI应用中启用触摸事件：用户界面。< script src =http://code.jquery.com/jquery.min.js >< /脚本>
< script src =http://code.jquery.com/ui/1.8.17/jquery-ui.min.js>< / script>
在jQuery UI之后及第一次使用之前添加Touch Punch。
$ b请注意，如果您使用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>
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:
<!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/
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:
...
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?
Best Regards.
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:
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 - iPad / iPhone上的可拖动图像 - 如何集成event.preventDefault（）;？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
