2

I want to check if image is in right place after drop. It alerts "wrong" all the time. Dunno why.

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

Few hours trying to fix it and nothing.

You can check example on fiddler

4

1 回答 1

2

您正在检查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 和放置的元素之间的关系。

我使用data-divimgs 上的数据属性来设置自定义标签来处理这种关系，在放置时我使用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/

于 2013-07-09T11:35:36.577 回答