10

最近我在 ipad 上实现了一个类似功能 web 应用程序的电子书。一个功能是创建一个视口来拖动书籍。我使用了这个视口插件（带演示）： http ://borbit.github.com/jquery.viewport/

问题是内容无法拖动。这可以在桌面上完美运行，但在 ipad 上却不行。电子书有两层，低层是书页。当用户点击这本书时，会显示一个覆盖层（顶层），它是一个用于拖动的较大 div。我怀疑 ipad 无法快速处理更高级别的 div。有什么方法可以在 ipad 中实现视口（请参阅上面链接中的示例）？谢谢

<div id="view" style="height: 385px; width: 1422px; position: relative; overflow: hidden; display: block;">
<div class="viewportBinder" style="position: absolute; overflow: hidden; height: 2541px; top: -1078px; width: 1247px; left: 88px;">
<div class="viewportContent ui-draggable" style="position: absolute; height: 1463px; width: 1247px; top: 329.98150634765625px; left: 0px;">
<div id="popup" style="height: 1463px; width: 1247px; display: block;"><img id="largeText" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_text.png"><img id="largeImg" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_image.jpg">
</div>
</div>
</div>
</div>
4

1 回答 1

3

我认为使用 jQuery UI Touch Punch 可以轻松解决这个问题，这个插件为 jQuery UI 添加了触摸事件支持。

http://touchpunch.furf.com/

尝试在视口脚本之前但在 UI 脚本之后添加脚本，例如：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>   
<script type="text/javascript" src="jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="jquery.viewport.js"></script>
<script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script>

就这样！

于 2012-12-19T12:22:54.653 回答