Question

此代码只允许在屏幕上拖动一个方块。我用Adobe build构建它。我无法弄清楚为什么它不适用于移动平台（android和ios）。在网页上正常工作。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="phonegap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
#draggable {
    height: 150px;
    padding: 0.5em;
    width: 150px;
    border: 1px solid black;
    background-color: #ddd;
}
</script>
<link rel="stylesheet" href="css/style.css">
<script>
$(document).ready(function() {
    // are we running in native app or in a browser?
    window.isphone = false;
    if(document.URL.indexOf("http://") === -1 
        && document.URL.indexOf("https://") === -1) {
        window.isphone = true;
    }

    if( window.isphone ) {
        document.addEventListener("deviceready", onDeviceReady, false);
    } else {
        onDeviceReady();
    }
});

function onDeviceReady() {
    // phonegap ready
    init();
    $( "#draggable" ).draggable();
    $("#msg").prepend("starting<br/>");
}

function init() {
  document.addEventListener("touchstart", touchHandler, true);
  document.addEventListener("touchmove", touchHandler, true);
  document.addEventListener("touchend", touchHandler, true);
  document.addEventListener("touchcancel", touchHandler, true);   
}
function touchHandler(event) {
  var touches = event.changedTouches,
  first = touches[0],
  type = "";
  switch(event.type)
  {
      case "touchstart": type = "mousedown";
        $("#msg").prepend("touchstart<br/>");
        break;
      case "touchmove":  type="mousemove"; break;        
      case "touchend":   type="mouseup"; break;
      default: return;
  }
  var simulatedEvent = document.createEvent("MouseEvent");
   simulatedEvent.initMouseEvent(type, true, true, window, 1,
                      first.screenX, first.screenY,
                      first.clientX, first.clientY, false,
                      false, false, false, 0/*left*/, null);
  first.target.dispatchEvent(simulatedEvent); 
  event.preventDefault();
}
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
<div id="msg">
</div>
</body>
</html>

代码基于一个基本的jquery ui示例，我从各种其他示例中提取了DeviceReady和TouchHandler代码。我所做的一切似乎都没有用。我错过了什么吗？

Answer 1

我找到了你的问题，它在cdns的网址中

当您放置//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css时，phonegap会将其转换为file://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css

因此，请更改您的网址以包含http：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

甚至更好，下载文件并将它们放在您的www文件夹中，这样应用程序就不需要下载它们，并且应该加载更快并脱机工作。

phonegap拖动无法在移动平台上运行

1 个答案: