Drag and Drop in iframe not working in Spring

Question

I am trying to implement drag and drop in iframe in Spring (working in Eclipse 2020-03) and iframe just does not seem to accept any possibility of cooperation. I came across this - arguably older - [snippet of working code][1] but the iframe in eclipse is not even able to accept window.onload. Where is the problem?

EDIT: adding my code

<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

Using the code from this example (with jQuery), I came up with the following (although very crude) solution:

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

A JSFiddle is provided as well.

This is what I think you wanted. Is it working perfectly? No, for that I would suggest looking at the jQuery solution (which is way more extensive than my little demo).

Edit:

Made a new JSFiddle with a increased height and width on the div inside the iframe. This allows to drop anywhere instead of only on the text.

Edit 2:

For some reason the condition if (event.target.className == "dropzone2") did not work for me in eclipse; when removed, everything works fine