最近我实现了一个电子书,如在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>
解决方法
我认为这可以很容易地解决使用jQuery UI Touch Punch,这个插件添加触摸事件支持jQuery UI.
尝试在视口脚本之前添加脚本,但在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>
就这样！
