JSFiddle - React, Tailwind, and code Playground

by piglin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>

<div style="background-color:grey;display:inline;cursor:move" id="draggable">DRAG ME</div>
<iframe src="https://fiddle.jshell.net/piglin/UAcC7/1869/show/" id="frame" style="width:100%;overflow:visible" seamless="seamless" scrolling="no"></iframe>

JavaScript

function allElementsFromPointIframe(x, y, offsetX, offsetY) {
  var element, elements = [];
  var old_visibility = [];
  while (true) {
    element = document.getElementById('frame').contentWindow.document.elementFromPoint(x - offsetX, y - offsetY);
    if (!element || element === document.getElementById('frame').contentWindow.document.documentElement) {
      break;
    }
    elements.push(element);
    old_visibility.push(element.style.visibility);
    element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout)
  }
  for (var k = 0; k < elements.length; k++) {
    elements[k].style.visibility = old_visibility[k];
  }
  elements.reverse();
  return elements;
}

var selected = $('');
var tmpColor = 'transparent';
$("#draggable").draggable({
  drag: function(event, ui) {
    var el = $(allElementsFromPointIframe(event.pageX, event.pageY, $(frame).offset().left, $(frame).offset().top));
    var div = $(el).filter('ul, li').not($(this));
    selected.css({'backgroundColor': tmpColor});
    selected = div.last()
    tmpColor = selected.css('backgroundColor');
    selected.css({'backgroundColor': 'red'});
    console.dir(div);
  },
  iframeFix: true,
  iframeOffset: $('#iframe').offset()
});