Question

我得到了这个页面我正在研究，其中一部分使用拖放问题。在Web浏览器中一切正常但我在移动设备上工作时遇到了问题。 here is link to code

我被告知要使用hammer.js，但我不知道如何在此页面中包含它。我是JS的新手，在我的长矛时间研究它。非常感谢帮助// Emil

我一直在尝试在我的页面上实现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!');
//  });

这是html代码：

<!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>

JS的注释部分工作得很好，但我不知道传递了什么（“dragstart”，拖（事件）

我试过这个没有运气......

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

这是什么错误我得到Uncaught TypeError：无法读取未定义的属性'setData'

在触摸屏上拖放HTML5 JS

0 个答案: