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");
  }
}

工作小提琴：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");
  }
}

小提琴：http://jsfiddle.net/YbM2X/4/

检查拖动的div是否在正确的位置

1 个答案:

修改