2

ドロップ後に画像が正しい場所にあるかどうかを確認したい。それは常に「間違っている」と警告します。なぜだかわからない。

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

それを修正しようとして数時間、何もありません。

フィドラーで例を確認できます

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 でdata-attribute を使用してカスタム タグを設定し、この関係を処理します。ドロップ時に を使用してリンクが正しいことを確認し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 に答える