Javascript 在iframe中拖放，在Spring中不工作

我试图在春季在iframe中实现拖放（在eclipse2020-03中工作），而iframe似乎不接受任何合作的可能性。我遇到了这个（可以说是更老的）[工作代码片段][1]，但是eclipse中的iframe甚至不能接受window.onload。问题在哪里

编辑：添加我的代码

<script>
    var dragged;

    /* events fired on the draggable target */
    document.addEventListener("drag", function(event) {

    }, false);

    document.addEventListener("dragstart", function(event) {
        dragged = event.target;
    }, false);

    document.addEventListener("dragover", function(event) {
        event.preventDefault();
    }, false);

    document.addEventListener("drop", function(event) {
        event.preventDefault();
        if (event.target.className == "dropzone") {
            dragged.parentNode.removeChild(dragged);
            event.target.appendChild(dragged);
        }
    }, false);
</script>

var；
/*对可拖动目标激发的事件*/
document.addEventListener（“拖动”），函数（事件）{
}，假）；
document.addEventListener（“dragstart”，函数（事件）{
拖动=event.target；
}，假）；
文件。添加事件列表器（“dragover”，功能（事件）{
event.preventDefault（）；
}，假）；
document.addEventListener（“drop”），函数（事件）{
event.preventDefault（）；
if（event.target.className==“dropzone”）{
拖动的.parentNode.removeChild（已拖动）；
event.target.appendChild（拖动）；
}
}，假）；

html:

拖我
测试区
测试帧下降区

使用本文中的代码，我提出了以下（尽管非常粗糙）解决方案：

拖我
测试区

var；
//var dragged2；
var iFrame=document.getElementById（“dropframe”）；
var iFrameWindow=iFrame.contentWindow；
iFrame.addEventListener（“加载”，函数（事件）{
iFrameWindow.document.body.addEventListener（'dragstart'，函数（事件）{
event.preventDefault（）；
});
iFrameWindow.document.body.addEventListener（'dragenter'，函数（事件）{
event.preventDefault（）；
//dragged2=event.target；
});
iFrameWindow.document.body.addEventListener（'dragover'，函数（事件）{
event.preventDefault（）；
});
iFrameWindow.document.body.addEventListener（'drop'，函数（事件）{
event.preventDefault（）；
//控制台日志（dragged2）；
如果（event.target.className==“dropzone2”）{
console.log（'drop event'）；
拖动的.parentNode.removeChild（已拖动）；
event.target.appendChild（拖动）；
}
});
});
/*对可拖动目标激发的事件*/
document.addEventListener（“拖动”），函数（事件）{
}，假）；
document.addEventListener（“dragstart”，函数（事件）{
拖动=event.target；
}，假）；
文件。添加事件列表器（“dragover”，功能（事件）{
event.preventDefault（）；
}，假）；
document.addEventListener（“drop”），函数（事件）{
event.preventDefault（）；
if（event.target.className==“dropzone”）{
拖动的.parentNode.removeChild（已拖动）；
event.target.appendChild（拖动）；
}
}，假）；

此外，还提供了一个

这就是我认为你想要的。它工作正常吗？不，因此我建议看看jQuery解决方案（它比我的小演示要广泛得多）

编辑：

在iframe内部的div上增加了高度和宽度，制作了一个新的。这允许在任何地方放置，而不是仅在文本上

编辑2:

---

由于某种原因，如果（event.target.className==“dropzone2”）条件在eclipse中对我不起作用；删除后，一切正常

您发布的代码来自于假定有效的代码片段（对我来说根本不起作用）。也许可以提供您自己的错误代码？作为一名新手，我刚刚复制并稍微调整了提供的更新代码有趣…这对我来说不起作用（我在firefox、vivaldi和chrome中的另一台计算机上进行了检查）很抱歉，JSFIDLE仅适用于您在更新中提供的代码。仍然在制作一个可以工作的示例。Hmmm，它显示文本“Test-iframe-dropzone”（我的代码没有处理这个文本），但仍然拒绝接受拖动的项。我一定会看看jQuery。非常感谢。您是否直接将其放在文本上（Test-iframe-dropzone）？如果没有，它就不起作用，因为主体有监听器，并且只由文本组成。另外，iframe文本源位于

srcdoc标记中，或者对于文件
src标记中。omg，我没有想到它……是的，它工作得很好。非常感谢。Eclipse中的iframe甚至不会显示“Test iframe dropzone”文本将
代码块移动到
的底部，它就可以工作了（在所有div下面，就在
之前）。JavaScript应该在DOM中最后加载，所以您希望它始终位于底部。安置不再是一种方式。
<div id="draggable" draggable="true"
        ondragstart="event.dataTransfer.setData('text/plain',null)">
        Drag me </div>

<div class="dropzone">Test dropzone</div>

<iframe class="dropzone">Test iframe dropzone</iframe>