1

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

（编辑：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>

如果有人可以帮助解决这个问题，那就太棒了。

这是我进行实际拖放之前的样子：

图 1

在我将图像放入框中后：

图 2

4

0 回答 0