Javascript 图像未正确放入dropbox

嘿，伙计们，我正在使用拖放功能，基本上是将图像从列表中拖放到一个拖放框中，这将触发某种偶数。但是，当我拖放图像时，它只是在顶部复制，而不是在下拉框中向下复制

（编辑：jquery coverscroll插件主页：）

就我个人而言，我不明白为什么要这样做。我正在使用下载的外部脚本添加滑动图像效果，下面是我的代码：

CSS 脚本

• 标记

  <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>
  

HTML

$（“#container2”）.coverscroll（）；

如果有人能帮上忙，那就太棒了

下面是我实际拖放之前的样子：

在我将图像放入框中后：

<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>

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

<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>