JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<div id="draggable">
    <div id="handle">Handle</div>
    <button tabindex="-1" id="focusTarget">Focus Target</button>
</div>

<div>Active Element: <span id="activeElement"></span></div>

CSS

#draggable {
    height: 300px;
    width: 300px;
    background-color: green;
}

#handle {
    width: 100%;
    height: 30px;
    background-color: red;
}

JavaScript

var draggable = $( "#draggable" ),
    focusTarget = $( "button" ),
    handle = $( "#handle" );

draggable.draggable({//
   handle: "#handle"
});

// All mousedowns in the draggable should have been prevented
// except for the one on the "handle" of our draggable
draggable.on( "mousedown", function( event ) {
    if ( event.target.id !== 'handle' && event.target.id !== 'focusTarget' ) {
        event.preventDefault();
    }
});


focusTarget.focus();


// Book-keeping Stuff
function trackActiveElement() {
    $( "#activeElement" ).text(
        document.activeElement.id
    );
}

$( document ).on( "focusin focusout", trackActiveElement );
trackActiveElement();