JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<div class="iframeHolder">
  <iframe srcdoc='</html><head></head><body style="width:100%;height:100%" class="frameBody dragFrameBody"><ul><li draggable="true">Hello</li></ul></body></html>' id="myIframe"></iframe>
</div>

CSS

.drop {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 200px;
  justify-content: space-between;
  background: cyan;
}

.child {
  height: 40px;
  width: 200px;
  background: blue;
}

JavaScript

function bubbleIframeMouseMove(iframe) {
  // Save any previous onmousemove handler
  var existingOnMouseMove = iframe.contentWindow.onmousemove;

  // Attach a new onmousemove listener
  iframe.contentWindow.ondragleave = function(e) {
    // Fire any existing onmousemove listener 
    if (existingOnMouseMove) existingOnMouseMove(e);

    // Create a new event for the this window
    var evt = document.createEvent("MouseEvents");

    // We'll need this to offset the mouse move appropriately
    var boundingClientRect = iframe.getBoundingClientRect();

    // Initialize the event, copying exiting event values
    // for the most part
    evt.initMouseEvent(
      "dragleave",
      true, // bubbles
      false, // not cancelable 
      window,
      e.detail,
      e.screenX,
      e.screenY,
      e.clientX + boundingClientRect.left,
      e.clientY + boundingClientRect.top,
      e.ctrlKey,
      e.altKey,
      e.shiftKey,
      e.metaKey,
      e.button,
      null // no related element
    );
		
    console.log('HERE', evt)
    // Dispatch the mousemove event on the iframe element
    iframe.dispatchEvent(evt);
  };
}

// Get the iframe element we want to track mouse movements on
var myIframe = document.getElementById("myIframe");

// Run it through the function to setup bubbling
bubbleIframeMouseMove(myIframe);