用于拖放 img 的 JavaScript 不适用于 Ipad/Iphone

Question

新的前问题!我需要让它在 Ipad/Iphone 上运行

Internet Explorer 问题已解决!

更改了 ev.dataTransfer.setData("content",ev.target.id);到 ev.dataTransfer.setData("Text",ev.target.id);

我目前正在从事一项网络教育工作，其中一部分是拖放查询。它在 Chrome 和 Firefox 中工作得很好，但在资源管理器中不起作用。我是 JS 的新手，不太熟悉 MS“标准”差异是什么。如果我的英语不好，请原谅，但这不是我的母语。

JS代码:

var i = 0;

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

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

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

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

if(i == 9)
{
    document.getElementById('next').style.display="inline";
}
  }
  else
  {
     alert("Wrong");
  }
}

HTML 代码:

<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="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag2" data-div="div2" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag3"  data-div="div3" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag4"  data-div="div4" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag5"  data-div="div5" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag6"  data-div="div6" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag7"  data-div="div7" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag8"  data-div="div8" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
    <img class="drag" id="drag9"  data-div="div9" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
</div>

<div id="next"> 
    <a href="q2.php" target="content"> Nästa </a>
</div>

我在其他一些文件中使用此 JS 代码来解决资源管理器问题:

var CB = 
{
addEvent : function(element, event, action)
{
    if (element.addEventListener)
    {
        element.addEventListener(event, action, false);
    }
    else
    {
        element.attachEvent("on" + event, action);
    }
}
}

非常感谢您的帮助

//埃米尔

Answer 1

IE 不通过函数参数发送事件，而是作为 window 对象的一部分发送事件。因为您调用事件参数 ev，所以它不知道这实际上是 event。

如果您想在 IE 中使用该事件，则必须编写以下行作为每个窗口的第一行代码(在您的情况下):

ev = ev || window.event;

或者您可以将代码中的每个 ev 实例替换为 event，因为 window 参数可以隐式使用。

来源:http://javascript.info/tutorial/obtaining-event-object