javascript - 检查拖动的 div 是否位于正确的位置

Question

我想检查图像在放置后是否位于正确的位置。它始终提醒“错误”。不知道为什么。

HTML:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img/patternslowo1.png" draggable="true" ondragstart="drag(event)">
<img id="drag2" src="img/patternslowo2.png" draggable="true" ondragstart="drag(event)">
<img id="drag3" src="img/patternslowo3.png" draggable="true" ondragstart="drag(event)">
<img id="drag4" src="img/patternslowo4.png" draggable="true" ondragstart="drag(event)">
<img id="drag5" src="img/patternslowo5.png" draggable="true" ondragstart="drag(event)">

Javascript:

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");
  ev.target.appendChild(document.getElementById(image));

  if (ev.dataTransfer.getData('div1') == 'drag1'){ 
     alert("ok");
  }
  else{
     alert("wrong");
  }
}

花了几个小时尝试修复它，但一无所获。

您可以查看 fiddler 上的示例

Answer 1

您在 getData 中检查了错误的数据。

您在拖动时设置 content 数据，但在放置时检查 div1。

您的代码必须是:

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");
  ev.target.appendChild(document.getElementById(image));
  if (ev.dataTransfer.getData('content') == 'drag1'){ 
     alert("ok");
  }
  else{
     alert("wrong");
  }
}

工作 fiddle :http://jsfiddle.net/YbM2X/1/

编辑

您需要处理拖动的 img 和放置的元素之间的关系。

我在 imgs 上使用数据属性 data-div 来设置自定义标记来处理这种关系，在放置时我使用 getAttribute 确保链接正确。 .

HTML:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" data-div="div1" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
<img id="drag2" data-div="div2" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
<img id="drag3"  data-div="div3" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
<img id="drag4"  data-div="div4" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">
<img id="drag5"  data-div="div5" src="http://images.stockfreeimages.com/866/sfi/free_8660001.jpg" draggable="true" ondragstart="drag(event)">

代码:

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')){ 
     alert("ok");          
  ev.target.appendChild(document.getElementById(image));
  }
  else{
     alert("wrong");
  }
}

fiddle :http://jsfiddle.net/YbM2X/4/