JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div style="position: fixed; border: 1px solid black; background-color: red; width: 50px; height: 100px; right: 0; bottom: 50px;">
    <div style="position: absolute; margin: 1px; background-color: blue; width: 40px; height: 40px;" class="draggable"></div>
    <div style="position: absolute; top: 42px; margin: 1px; background-color: green; width: 40px; height: 40px;" class="draggable2"></div>
</div>

CSS

body {
    height: 1000px;
    overflow: scroll;
}

JavaScript

$(function(){
    $('.draggable').draggable({
        helper: 'clone',
        appendTo: 'body',
        containment: 'document',
        revert: 'invalid'
    });
    
    $('.draggable2').draggable({
        helper: 'clone',
        appendTo: 'body',
        containment: 'document',
		revert : function(event) {
			// follow the fixed element instead of mousePos
			$(this).data("ui-draggable").originalPosition = $(this).offset();
			// return boolea
            return !event;
        }
        
    });
    
});
        
			// that evaluate like this:
            // return event !== false ? false : true;}}}