用于拖放img的JavaScript无法在Ipad / Iphone上运行 [英] JavaScript for drag and drop img not working on Ipad / Iphone

问题描述

新的preoblem！我需要在Ipad / Iphone上工作

New preoblem! I need to get this working on Ipad / Iphone

Internet Explorer问题已解决！

Internet Explorer issue SOLVED!

更改了ev.dataTransfer。使用setData（ 内容，ev.target.id）;到ev.dataTransfer.setData（Text，ev.target.id）;

Changed ev.dataTransfer.setData("content",ev.target.id); to ev.dataTransfer.setData("Text",ev.target.id);

我正在进行网络教育，其中一部分是拖放查询。
它在Chrome和Firefox中运行良好，但在资源管理器中不起作用。
我是JS的新手，并不熟悉MS标准的差异。
借口，如果我的英语不好但不是我的母语。

I'm curently working on a web education where one part is a drag and drop query. It's works just fine in Chrome and Firefox but it won't work in Explorer. I'm new to JS and not so familar to what MS "standards" difrences is. Excuse if my english is bad but it's not my native language.

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代码：

I use this JS code in some other files for Explorer issues:

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

非常感谢帮助

// Emil

推荐答案

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

IE does not send the events through a function parameter, but as a part of the window object. Because you call your event parameter ev, it does not know that this is actually event.

如果您想在IE中使用该事件，您必须将以下行写为每个窗口的第一行代码（在您的情况下）：

If you want to use the event in IE, you'll have to write the following line as the first line of code for every window (in your case):

ev = ev || window.event;

或者您只需更换 ev 在你的代码中使用事件，因为window参数可以隐式使用。

or you can just replace every instance of ev in your code with event, because the window parameter can be used implicitly.

source： http://javascript.info/tutorial/obtaining-event-object

这篇关于用于拖放img的JavaScript无法在Ipad / Iphone上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！