Javascript 在触摸屏上拖放HTML5 JS_Javascript_Android_Ios_Html

Javascript 在触摸屏上拖放HTML5 JS

javascript android ios html

Javascript 在触摸屏上拖放HTML5 JS,javascript,android,ios,html,Javascript,Android,Ios,Html,我得到了我正在处理的这个页面，其中一部分使用了拖放问题。在网络浏览器中一切都很好，但我在移动设备上使用时遇到了问题。我被告知要使用hammer.js，但我不知道如何在这个页面上包含它。我对JS很陌生，在我的矛时代学习它。非常感谢你的帮助//埃米尔我一直在尝试在我的页面上安装hammer.js，我不确定我做错了什么就像我之前说过的，我对JS很陌生以下是js代码： var i = 1; var divAll = document.getElementsByClassName("drop"

我得到了我正在处理的这个页面，其中一部分使用了拖放问题。在网络浏览器中一切都很好，但我在移动设备上使用时遇到了问题。

我被告知要使用hammer.js，但我不知道如何在这个页面上包含它。我对JS很陌生，在我的矛时代学习它。非常感谢你的帮助//埃米尔

我一直在尝试在我的页面上安装hammer.js，我不确定我做错了什么

就像我之前说过的，我对JS很陌生

以下是js代码：

var i = 1;
var divAll = document.getElementsByClassName("drop");

function allowDrop(ev)
{
  ev.preventDefault();
}    

function drag(ev)
{
  ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
  ev.preventDefault();
  var image =ev.dataTransfer.getData("Text");

  if (ev.target.id == document.getElementById(image).getAttribute('data-div'))
  { 

ev.target.appendChild(document.getElementById(image));
i++;

for(var x = 0; x < divAll.length; x++)
    {
        divAll[x].style.backgroundImage="none";
    }   

if(i < 10)
{
    document.getElementById('div'+i).style.backgroundImage="url(tom.png)"
}
  }
  else
  {

  }
}

var element = document.getElementById('drag1');
    var hammertime = Hammer(element).on("dragstart", drag(event) );

//  var element = document.getElementById('drag1');
//   var hammertime = Hammer(element).on("tap", function(event) {
//    alert('hello!');
//  });

这是我得到的未捕获类型错误：无法读取未定义的属性“setData”

Hammer.js文档应该解释如何在页面上包含脚本。您可能也需要jQuery，我肯定jQuery解释了如何使用jQuery。在jQuery之后以相同的方式包含hammer.js。

<!DOCTYPE html>

<html>
 <head>
    <title></title>
    <link href="dd.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Averia+Sans+Libre:300,400,700,300italic,400italic,700italic' rel='stylesheet' type='text/css'>

 <script src="hammer.js"></script>

 </head>

<body>
  <form method="post" action="page8.php">

  <div class="cont" id="q1">
    <label></label><br />
<div id="box">
    <div class="drop" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="drop" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="drop" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="drop" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="drop" id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="drop" id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="drop" id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="drop" id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="drop" id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

<div id="pic">
    <img class="drag" id="drag1" data-div="div1" src="c1.png" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag2" data-div="div2" src="c2.png" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag3"  data-div="div3" src="c3.png" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag4"  data-div="div4" src="c4.png" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag5"  data-div="div5" src="c5.png" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag6"  data-div="div6" src="c6.png" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag7"  data-div="div7" src="c7.png" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag8"  data-div="div8" src="c8.png" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag9"  data-div="div9" src="c9.png" draggable="true" ondragstart="drag(event)">
</div>

<script type="text/javascript" src="test.js"></script>
  </div>

  </form>
 </body>
</html>

var element = document.getElementById("drag1");
var hammertime = Hammer(element).on("dragstart", function(ev) { 
    ev.gesture.preventDefault();  
    drag(ev);