Javascript 触摸冲床不工作
我正在用jQuery Mobile制作一个HTML5应用程序,我刚刚在该应用程序中添加了触摸穿孔功能。这个网站()在我的手机上运行得很好,但当我尝试将同样的技术应用到我的应用程序中时,可拖动功能无法正常工作 这是我的代码头,所以你们可以检查我是否插入了正确的jquery源代码Javascript 触摸冲床不工作,javascript,jquery,html,jquery-mobile,touch-punch,Javascript,Jquery,Html,Jquery Mobile,Touch Punch,我正在用jQuery Mobile制作一个HTML5应用程序,我刚刚在该应用程序中添加了触摸穿孔功能。这个网站()在我的手机上运行得很好,但当我尝试将同样的技术应用到我的应用程序中时,可拖动功能无法正常工作 这是我的代码头,所以你们可以检查我是否插入了正确的jquery源代码 <head> <title>Parking Lot App</title> <meta name="viewport" content="width=device-width,
<head>
<title>Parking Lot App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/florida_tech.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script> <!-- TOUCH PUNCH -->
</head>
停车场应用程序
这是显示内容的代码。它只是一个“div”中有两个绿色块的图像
<div data-role="content" style="margin:0px; padding:0px; border:0px">
<div id="draggable" class="ui-widget-content" style="position:relative; height: 347px">
<div style=" position: absolute; top: 0px; left: 0px">
<img src="style/pic.png" alt="Parking Lot Map"/>
</div>
<div style="background-color:green; width:17px; height:35px; z-index: 2; position: absolute; top: 31px; left: 81px ">
 
</div>
<div style="background-color:green; width:17px; height:35px; z-index: 2; position: absolute; top: 31px; left: 102px ">
 
</div>
</div>
 
 
也许jQueryUI库和jQuery移动库相互冲突。 我根据您的代码制作了示例代码:
<html>
<head>
<title>Parking Lot App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--<link rel="stylesheet" href="themes/florida_tech.min.css" />-->
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div data-role="content" style="margin:0px; padding:0px; border:0px">
<div id="draggable" class="ui-widget-content" style="position:relative; height: 347px">
<div style=" position: absolute; top: 0px; left: 0px">
<img src="style/pic.png" alt="Parking Lot Map"/>
</div>
<div style="background-color:green; width:17px; height:35px; z-index: 2; position: absolute; top: 31px; left: 81px "> </div>
<div style="background-color:green; width:17px; height:35px; z-index: 2; position: absolute; top: 31px; left: 102px "> </div>
</div>
</div>
<script>
$('#draggable').draggable();
</script>
</body>
</html>
停车场应用程序
 
 
$('#draggable').draggable();
这段代码适用于我的ipadmini(iOS6)和笔记本电脑浏览器(Chrome、Safari等)。在上面的代码中,我注释掉了样式表(“themes/florida_tech.min.css”和“”)。在我的环境中,“jquery.mobile.structure-1.3.1.min.css”可能与jQueryUI冲突。当我注释掉这个样式表时,一切都很好