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

编辑创建了一个 Fiddle .不知道是不是因为发生了中断，但出于某种原因， fiddle 没有显示我在 VS 元素中看到的拖动动画。

Answer 1

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

您需要将您的 JS 代码向上移动(尝试将它放在一个单独的文件中，并在您的任何内容之前对其进行“处理”

第2部分:您的代码失败的原因是您没有为要拖动的元素设置ID。为元素设置一个 ID，它将起作用:

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