问题描述
我正在使用jQuery UI的拖放功能，并且可以在我的网站上使用，但是当我在iPad上导航到我的网页时，div不会拖动-页面本身会移动上和下。
我在head标签中：
<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css\" />
<link rel=\"stylesheet\" href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/le-frog/jquery-ui.css\" type=\"text/css\" media=\"all\" />
<script src=\"http://www.google.com/jsapi\"></script>
<script>
google.load(\"jquery\",\"1\");
google.load(\"jqueryui\",\"1\");
google.setonLoadCallback(init);
</script>
<script type=\"text/javascript\" src=\"http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js\"></script>
解决方法
优秀的样品解决方案：
jQuery UI Touch Punch是一个小技巧，可使用jQuery UI用户界面库在网站上使用触摸事件。
当前，jQuery UI用户界面库不支持在其小部件和交互中使用触摸事件。这意味着您在桌面浏览器中设计和测试的平滑UI将在大多数（如果不是全部）支持触摸的移动设备上失败，因为jQuery UI会监听鼠标事件（鼠标悬停，mousemove和mouseout而非触摸事件），touchstart，touchmove和touchend。
这就是jQuery UI Touch Punch出现的地方。TouchPunch通过使用模拟事件将触摸事件映射到其鼠标事件类似物来工作。只需将脚本包含在页面中，您的触摸事件就会变成相应的鼠标事件，jQuery UI将按预期响应。
正如我所说的，Touch Punch是一种hack。它避开了jQuery UI的一些核心功能，以处理触摸事件的映射...
,这个问题是已知的，并且已经被研究。
它要求在正确的事件处理程序中进行正确的“ 1”调用。
您需要的一切都在这里：
jQuery-iPad / iPhone上的可拖动图像-如何集成event.preventDefault（）;？
,http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/包含一个出色的代码片段，可将触摸事件转换为鼠标事件：
function touchHandler(event)
{
var touches = event.changedTouches,first = touches[0],type = \"\";
switch(event.type)
{
case \"touchstart\": type = \"mousedown\"; break;
case \"touchmove\": type=\"mousemove\"; break;
case \"touchend\": type=\"mouseup\"; break;
default: return;
}
// initMouseEvent(type,canBubble,cancelable,view,clickCount,// screenX,screenY,clientX,clientY,ctrlKey,// altKey,shiftKey,metaKey,button,relatedTarget);
var simulatedEvent = document.createEvent(\"MouseEvent\");
simulatedEvent.initMouseEvent(type,true,window,1,first.screenX,first.screenY,first.clientX,first.clientY,false,0/*left*/,null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init()
{
document.addEventListener(\"touchstart\",touchHandler,true);
document.addEventListener(\"touchmove\",true);
document.addEventListener(\"touchend\",true);
document.addEventListener(\"touchcancel\",true);
}