在 iframe 中拖放在 Spring 中不起作用

Question

我正在尝试在 Spring（在 Eclipse 2020-03 中工作）中的 iframe 中实现拖放，而 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>

html:

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

Answer 1

使用这个 example (with jQuery) 中的代码，我想出了以下（虽然很粗糙）解决方案：

<div id="draggable" draggable="true"
        ondragstart="event.dataTransfer.setData('text/plain',null)">
        Drag me </div>

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

<iframe id="dropframe" srcdoc='<div class="dropzone2">Test iframe dropzone</div>'></iframe>

    var dragged;
    //var dragged2;
    var iFrame = document.getElementById("dropframe");
    var iFrameWindow = iFrame.contentWindow;
    
    iFrame.addEventListener("load", function(event) {
        iFrameWindow.document.body.addEventListener('dragstart', function(event) {
        event.preventDefault();
      });
        iFrameWindow.document.body.addEventListener('dragenter', function(event) {
        event.preventDefault();
        //dragged2 = event.target;
      });
        iFrameWindow.document.body.addEventListener('dragover', function(event) {
        event.preventDefault();
      });
        iFrameWindow.document.body.addEventListener('drop', function(event) {
        event.preventDefault();
        //console.log(dragged2);
        if (event.target.className == "dropzone2") {
            console.log('drop event');
            dragged.parentNode.removeChild(dragged);
            event.target.appendChild(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);

还提供了 JSFiddle。

这就是我想你想要的。它工作完美吗？不，为此我建议查看 jQuery 解决方案（比我的小演示更广泛）。

编辑：

在 [=40= 上增加了 height 和 width 的新 JSFiddle ] 在 iframe 中。这允许放在任何地方，而不仅仅是放在文本上。

编辑 2：

出于某种原因，条件 if (event.target.className == "dropzone2") 在 eclipse 中对我不起作用；删除后，一切正常

在 iframe 中拖放在 Spring 中不起作用

Drag and Drop in iframe not working in Spring

html

javascript

eclipse

spring

drag-and-drop