JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div id="wrapper">
    <div id="draggables-container">
        <div id="help-text">Wait for everything to be loaded...</div>
        <div class="draggable"></div>
    </div>
    <div id="iframe-container">
        <iframe id="iframe"></iframe>
    </div>
    
    <!-- NOTES -->
    <div id="notes">
        - This issue occurs everytime scroll &lsquo;x&rsquo; and/or &lsquo;y&rsquo; are not 0.<br>
        - The scroll offsets needs to be taken into account when calculating drag and drop logic and updated on scroll event (also scrolling while dragging should be supported).
        - Even when scrollTop(80) in this example is set before initialization of draggable's and droppable's the issue exists. 
    </div>
</div>

CSS

body,html{width:100%;height:100%;padding:0;margin:0;font-family:arial;font-size:14px;}
*{box-sizing:border-box;}
#wrapper{
    width:100%;
    height: 100%;
    background-color:#e1e1e1;
    padding:10px;
}
#draggables-container{margin-bottom:20px;}
.draggable{
    background-color:blue;
    width:20px;
    height:20px;
}
#notes{
    color:#777;
    font-style:italic;
}

JavaScript

/* <-- Workaround retrieved from https://gist.github.com/Craga89/8219459 */
// Create new object to cache iframe offsets
$.ui.ddmanager.frameOffsets = {};
 
// Override the native `prepareOffsets` method. This is almost
// identical to the un-edited method, except for the last part!
$.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(),
        doc, frameOffset;
 
    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 dragoged 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);
        }
        
        // Re-calculate offset
        m[i].offset = m[i].element.offset();
 
        // Re-calculate proportions (jQuery UI ~1.10 introduced a `proportions` cache method, so support both here!)
        proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight - $("iframe").contents().scrollTop() };
        typeof m[i].proportions === 'function' ? m[i].proportions(proportions) : (m[i].proportions = proportions);
        
        /* ============ Here comes the fun bit! =============== */
 
        // If the element is within an another document...
        if ((doc =...