我使用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.我试图让它在移动设备上运行(在iPhone上,如果我拖动图像然后拖动整个页面).我想使用jquery mobile.这是正确的方法吗？如果是这样,从常规jquery转换到jquery mobile是否相当容易？而且,如果我使用jquery mobile,它是否仍然可以从桌面上拖动？
谢谢!