I am using interactjs to create drag drop between iframe and parent.

The issue: When I start dragging and drops it anywhere outside dropzone , it still fire droped event.

HTML:

<div id="yes-drop" class="draggable"> Draggable Element </div>
<iframe></iframe>`


JS:
`
const position = { x: 0, y: 0 };
const iframe = document.querySelector("iframe");

const iframeDoc = iframe.contentDocument;
const html = `
<style>

.dropzone{
  height:100%;
  width:100%;
  border:solid red 1px;
}

.drop-activated{
  background:blue;
}

</style>
  <div id="drop-zone" class="dropzone"></div>
`;

iframeDoc.open();
// console.debug('Iframe writing html : ',html);
iframeDoc.write(html);

interact(".draggable").draggable({
  listeners: {
    start(event) {
      console.log(event.type, event.target);
    },
    move(event) {
      position.x += event.dx;
      position.y += event.dy;

      event.target.style.transform = `translate(${position.x}px, ${position.y}px)`;
    },
  },
});

interact(".dropzone", { context: iframeDoc })
  .dropzone({
    accept: "#yes-drop",
    ondrop: function (event) {
      alert(event.relatedTarget.id + " was dropped into " + event.target.id);
    },
    ondropdeactivate: function (event) {
      console.log("drop deactivate");
      event.target.classList.remove("drop-activated");
    },
  })
  .on("dropactivate", function (event) {
    event.target.classList.add("drop-activated");
  });

Here is the link to codepen for implementation – Interact JS Iframe