Javascript 拖放；css更改后drop脚本开始崩溃

我正在尝试制作一个

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>

.目标箱{
宽度：10em；
高度：10公分；
-webkit边界半径：5em；
-moz边界半径：5em；
边界半径：5em；
边框：3个黑色虚线；
浮动：左；
}
.imageBox{
宽度：10em；
高度：10公分；
-webkit边界半径：5em；
-moz边界半径：5em；
边界半径：5em；
填充：1px；
边框：1px实心#AAAAA；
背景色：红色；
}
.imageBox包装{
位置：相对位置；
显示：内联块；
保证金：自动；
顶部：25em；
}
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

编辑

---

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

它中断的原因是因为您在HTML引用

拖动
后声明了
拖动
函数

你需要将你的JS代码向上移动（试着把它放在一个单独的文件中，然后在你的代码中的任何东西之前把它删除）
第2部分：代码失败的原因是您没有为要拖动的元素设置ID。为元素设置ID，它就会工作：

试着为你的问题创建一把小提琴。！！@SajadLfc你来了^^编辑了小提琴。没有解决主要问题，解决了小提琴中的拖动动画；-）你没有为红色圆圈设置ID。请参阅我的更新答案，以获得有效答案。