0

http://i39.tinypic.com/10xyi3c.png

上記の画像リンクを参照してください。左側の 4 つの項目をそれぞれ右側のキャンバスにドラッグ アンド ドロップしようとしています。4 つのアイテムは 1 つの div にあり、キャンバスは別の div にあります。

アイコンをドラッグした後、背景画像の後ろにあるようです。下の画像を参照してください。

http://i44.tinypic.com/t0kcx0.png

私は何をすべきか？

ファイルのコードは次のとおりです。

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>Daisy</title>

<link rel="stylesheet" type="text/css" href="_css/style1.css">


<!-- CALLING THE DRAG AND DROP FUNCTION -->

<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data))
}
</script>



</head>
<body>

<div id="wrapper">

  <div id="header"><input name="save" type="button" class="save" value="Save"  width=60% height=60%>
  <img src="_assets/title.png" width=60% height=60 %>

  </div>




  <!--       PLEASE DO SOME RESEARCH ON HOW TO BRING THE DRAG PICTURE(e.g pot,soil,opp etc etc FORWARD     -->
  <!--       ALSO, HOW TO BRING THE BACKGROUND PICTURE BACKWARDS -->


 <div id="subNav"><img src="_assets/pot.png" id="pot1" alt="pot" width=100% height=100% ondragstart="drag(event)" draggable="true" class="icons">
                   <img src="_assets/soil.png" id="soil1" ondragstart="drag(event)" alt="soil" width=100% height=100% draggable="true" class="icons">
                   <img src="_assets/opp.png" id="can1" ondragstart="drag(event)" alt="wateringcan" width=100% height=100% draggable="true" class="icons">
                   <img src="_assets/Crazy_daisy.png"   id="seed1" ondragstart="drag(event)" alt="seeds" width=100% height=100% draggable="true" class="icons">                   
  </div>






                  <!-- DRAG AND DROP INTO DESIGNATRED AREA-->
      <div id="content" ondrop="drop(event)" draggable="true" ondragover="allowDrop(event)"><img src="_assets/background.png" width=95% height=95% alt="bg">
                        <img src="_assets/instructions.png" alt="instructions" width=25% height=25% class="instructions">
      </div>






</div>
</body>
</html>
4

0 に答える 0