用於拖放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;

或者您可以只將event的ev每個實例替換為event ，因為window參數可以隱式使用。

來源： http ： //javascript.info/tutorial/obtaining-event-object