JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div id="live">
    <ul>
        <li>
            <a href="#tabOne">Tab One</a>
        </li>
        <li>
            <a href="#tabTwo">Tab Two</a>
        </li>
    </ul>
    <div id="tabOne">
        <p class="dragme">Drag me</p>
        <p class="dragme">Drag me too</p>
    </div>
    <div id="tabTwo">
        <p>Some Tab Two Content</p>
    </div>
</div>

JavaScript

$( '#live' ).tabs();

$( '.dragme' ).draggable( {
    helper: 'clone',
    scroll: true,
    revert: 'invalid',
    revertDuration: 250,
    opacity: 0.6,
    greedy: true,
    cursorAt: { top : 5 },
    start: function( evt )
    {
        evt.stopPropagation();
        evt.stopImmediatePropagation();
    }
} );