CSS更改后拖放脚本开始崩溃

Question

我试图使div拖放某些地方。它工作得很好，但后来我改变了css，现在它开始崩溃的javascript，我似乎无法在css中找到原因。

关于如何解决这个问题有任何线索吗?

<style>
    .targetBox{
    width: 10em; 
        height: 10em; 
        -webkit-border-radius: 5em; 
        -moz-border-radius: 5em;
        border-radius: 5em;
        border:3px dashed black;
        float:left;
    }
    .imageBox{
        width: 10em; 
        height: 10em;
        -webkit-border-radius: 5em; 
        -moz-border-radius: 5em;
        border-radius: 5em;
        padding:1px;
        border:1px solid #aaaaaa; 
        background-color:red;
    }
    .imageBox-wrapper{
        position:relative;
        display:inline-block;
        margin:auto;
        top:25em;
    }
</style>
<script type="text/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");
        ev.target.appendChild(document.getElementById(data));
    }
</script>
<div>
    <div class="targetBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="targetBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="targetBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="imageBox-wrapper">
    <div class="imageBox" draggable="true" ondragstart="drag(event)"></div>
</div>

编辑创造了一把小提琴。不知道是否因为中断发生了，但由于某种原因，小提琴没有显示我在VS项目中看到的拖动动画。

Answer 1

它被打破的原因是因为你在HTML引用drag之后声明了drag函数。

你需要把你的JS代码向上移动(试着把它放在一个单独的文件中，并把它放在你的

第2部分:代码失败的原因是您没有为要拖动的元素设置ID。为元素设置一个ID，它就可以工作了:

http://jsfiddle.net/eBsqJ/2/