JSFiddle - React, Tailwind, and code Playground

HTML

<p>Try clicking one box, it will turn green. Then, drag another box over the iframe, then try clicking it.</p>
<div class="draggable"></div>
<div class="draggable"></div>
<div class="draggable"></div>
<iframe src=""></iframe>

CSS

.draggable {
    width: 100px;
    height: 100px;
    background: #ccc;
    margin: 5px;
    z-index: 2;
}

.ui-draggable-iframeFix {
    z-index: 1 !important;
}

iframe {
    width: 500px;
    height: 500px;
}

JavaScript

$(document).ready(function(){
    $('.draggable').draggable({
        iframeFix: true,
        distance: 20
    }).click(function(){
        $(this).css({background: "#00ff00"});
    });
});