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>

<div id="draggablePosition" style="z-index:10010;position:absolute;display:inline-block;">
  <span style="z-index:10010;display:inline-block;width:5px;height:5px;background-color:red"></span>
  <span id="draggablePosition1Text" style="display:inline-block"></span>
</div>
<div id="draggablePosition1" style="z-index:10010;position:absolute;display:inline-block;">
  <span style="z-index:10010;display:inline-block;width:5px;height:5px;background-color:purple"></span>
  <span id="draggablePosition2Text" style="display:inline-block"></span>
</div>
<div id="draggablePosition2" style="z-index:10010;position:absolute;display:inline-block;">
  <span style="z-index:10010;display:inline-block;width:5px;height:5px;background-color:green"></span>
  <span id="draggablePosition3Text" style="display:inline-block"></span>
</div>
<div id="draggablePosition3" style="z-index:10010;position:absolute;display:inline-block;">
  <span style="z-index:10010;display:inline-block;width:5px;height:5px;background-color:blue"></span>
  <span id="draggablePosition4Text" style="display:inline-block"></span>
</div>
<div id="draggablePosition4" style="z-index:10010;position:absolute;display:inline-block;">
  <span style="z-index:10010;display:inline-block;width:5px;height:5px;background-color:yellow"></span>
  <span id="draggablePosition5Text" style="display:inline-block"></span>
</div>
<div id="draggablePosition5" style="z-index:10010;position:absolute;display:inline-block;">
  <span style="z-index:10010;display:inline-block;width:5px;height:5px;background-color:brown"></span>
  <span...

JavaScript

$("#draggable").draggable({
  drag: function(event, ui) {
    
    event.target.innerHTML = event.currentTarget;
    
    //DEBUG
    console.log(event, ui);
    var offset = $(this).offset();
    var xPos = ui.position.left;
    var yPos = ui.position.top;
    var element = document.elementFromPoint(xPos, yPos);
    $('#draggablePosition').css('top', yPos).css('left', xPos);
    $('#draggablePositionText').text(element ? element.classList : 'null');
    var xPos = event.pageX;
    var yPos = event.pageY;
    var element = document.elementFromPoint(xPos, yPos);
    $('#draggablePosition1').css('top', yPos).css('left', xPos);
    $('#draggablePosition1Text').text(element ? element.classList : 'null');
    var xPos = event.clientX;
    var yPos = event.clientY;
    var element = document.elementFromPoint(xPos, yPos);
    $('#draggablePosition2').css('top', yPos).css('left', xPos);
    $('#draggablePosition2Text').text(element ? element.classList : 'null');
    var xPos = event.offsetX;
    var yPos = event.offsetY;
    var element = document.elementFromPoint(xPos, yPos);
    $('#draggablePosition3').css('top', yPos).css('left', xPos);
    $('#draggablePosition3Text').text(element ? element.classList : 'null');
    var xPos = event.screenX;
    var yPos = event.screenY;
    var element = document.elementFromPoint(xPos, yPos);
    $('#draggablePosition4').css('top', yPos).css('left', xPos);
    $('#draggablePosition4Text').text(element ? element.classList : 'null');
    var xPos = offset.left;
    var yPos = offset.top;
    var element = document.elementFromPoint(xPos, yPos);
    $('#draggablePosition5').css('top', yPos).css('left', xPos);
    $('#draggablePosition5Text').text(element ? element.classList : 'null');
  },
  iframeFix: true,
  iframeOffset: $('#iframe').offset()
});