javascript - 画像がドロップボックスに正しくドロップされない

Question

やあみんな、私はドラッグ アンド ドロップ機能を使用して、基本的にリストからイメージをドロップしてドロップ ボックスにドロップし、何らかのイベントをトリガーします。しかし、画像をドラッグ アンド ドロップすると、ドロップ ボックスの下ではなく、上に複製されます。

(編集: jquery coverscroll プラグインのホームページ: http://slobodan.99k.org/plugins/coverscroll.html )

私の人生では、なぜこれを行うのかわかりません。スライド画像効果を追加するためにダウンロードした外部スクリプトを使用しています。これが私のコードです。

CSS

body {
    font-family:Arial, Helvetica, sans-serif;
}
#container2 {
    width:850px;
    height:200px;
    margin-left:25px;
}
#container2 img, #container2 .item {
    width:100%;
    height:100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0px 5px 5px #777;
    -webkit-box-shadow: 0px 5px 5px #777;
    box-shadow: 0px 5px 5px #777;
}
#dragBox {
    width:336px;
    height:221px;
    margin:10px;
    padding:10px;
    border:1px solid #aaaaaa;
}

脚本

• 鬼ごっこ

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="scripts/jquery.coverscroll.min.js"></script>
  

• JavaScript

  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");
      var theNode = document.getElementById(data);
      var nodeCopy = theNode.cloneNode(true);
      ev.target.appendChild(nodeCopy);
      if (data == "drag1") {
          foodOne();
      }
      if (data == "drag2") {
          foodTwo();
      }
      ev.target.removeChild(nodeCopy);
  }
  
  function foodOne() {
      alert("You choose Food One");
  }
  
  function foodTwo() {
      alert("You choose Food Two");
  }
  

HTML

<div id="container2">
    <img id="drag1" src="foodOne.jpg" draggable="true" ondragstart="drag(event)"
    width="336" height="221">
    <img id="drag2" src="foodTwo.jpg" draggable="true" ondragstart="drag(event)"
    width="336" height="221">
    <img id="drag1" src="foodThree.jpg" draggable="true" ondragstart="drag(event)"
    width="336" height="221">
    <img id="drag2" src="foodFour.jpg" draggable="true" ondragstart="drag(event)"
    width="336" height="221">
</div>
<script>
    $('#container2').coverscroll();
</script>
<br/>
<br/>
<br/>
<br/>
<div div align="center">
    <div id="dragBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

誰かがこれを手伝うことができれば、それは素晴らしいことです。

実際のドラッグ アンド ドロップを行う前は、次のようになります。

そして、画像をボックスにドロップした後：