触摸打孔不工作答案

【问题标题】：Touch Punch not working触摸打孔不工作
【发布时间】：2014-02-19 15:27:52
【问题描述】：

我正在使用 jQuery Mobile 制作一个 HTML5 应用程序，并且我刚刚在应用程序中添加了触控打孔功能。该网站 (http://touchpunch.furf.com/) 在我的手机中完美运行，但是当我尝试将相同的技术应用到我的应用程序中时，可拖动功能无法正常工作。

这是我的代码，所以你们可以检查我是否插入了正确的jquery源。

<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”内有 2 个绿色块的图像

  <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 ">
                                &nbsp
      </div>
      <div style="background-color:green; width:17px; height:35px; z-index: 2; position: absolute; top: 31px; left: 102px ">
                                &nbsp
      </div>

  </div>

【问题讨论】：

标签： javascript jquery html jquery-mobile touch-punch

【解决方案1】：

可能 jQueryUI 库和 jQuery Mobile 库相互冲突。我从您的代码中制作了示例代码：

<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 ">&nbsp</div>
    <div style="background-color:green; width:17px; height:35px; z-index: 2; position: absolute; top: 31px; left: 102px ">&nbsp</div>
   </div>
  </div>
  <script>
   $('#draggable').draggable();
  </script>
 </body>
</html>

此代码适用于我的 iPad mini(iOS6) 和笔记本电脑浏览器（Chrome、Safari 等）。在上面的代码中，我注释掉了样式表（“themes/florida_tech.min.css”和“http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css”）。在我的环境中，“jquery.mobile.structure-1.3.1.min.css”可能与 jQueryUI 冲突。当我注释掉这个样式表时，一切正常。

【讨论】：