JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: absolute; top: 0; left: 300px; width: 520px;">
	<iframe id="DropFrame" src="http://fiddle.jshell.net/pFNMt/show/light/" style="width: 520px; height: 600px;" ></iframe>
</div>

<div class="draggable">Ollie</div>
<div class="draggable">Kevin</div>
<div class="draggable">emailbuilder</div>

CSS

.draggable {
    width: 200px;
    height: 40px;
    display: block;
    background: orange;
}

JavaScript

/** added the fix **/
(function( $, undefined ) {
	$.ui.ddmanager.prepareOffsets =  function(t, event) {
		var i, j,
			m = $.ui.ddmanager.droppables[t.options.scope] || [],
			type = event ? event.type : null, // workaround for #2317
			list = (t.currentItem || t.element).find(":data(ui-droppable)").addBack();

		droppablesLoop: for (i = 0; i < m.length; i++) {

			//No disabled and non-accepted
			if(m[i].options.disabled || (t && !m[i].accept.call(m[i].element[0],(t.currentItem || t.element)))) {
				continue;
			}

			// Filter out elements in the current dragged item
			for (j=0; j < list.length; j++) {
				if(list[j] === m[i].element[0]) {
					m[i].proportions.height = 0;
					continue droppablesLoop;
				}
			}

			m[i].visible = m[i].element.css("display") !== "none";
			if(!m[i].visible) {
				continue;
			}

			//Activate the droppable if used directly from draggables
			if(type === "mousedown") {
				m[i]._activate.call(m[i], event);
			}

			m[i].offset = m[i].element.offset();

			// check if droppable is inside iframe
			// TODO: nested iframes support.
if (t.document[0] != m[i].document[0]) { 
	var frames = t.document[0].getElementsByTagName('iframe');
	for (var x = frames.length; x-- > 0;) {
		if (frames[x].contentWindow.document === m[i].document[0]) {
			var frame = $(frames[x]).offset();
			m[i].offset.left += frame.left;
			m[i].offset.top += frame.top;
		}
	}
}

			m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight };

		}
	};
})(jQuery);


$(document).on('ready', function () {
    
    $('.draggable').draggable({
        cursorAt: {
            top: -5,
            left: -5,
        },
        iframeFix: true,
        helper: 'clone'
    });

    $('#DropFrame').on('load', function () {
        $(this).contents().find('.droppable').droppable({
            hoverClass: 'ui-state-active',
            greedy: true
        });
    });
});