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">
<h1>In IE7, drag either draggable item below and let it go. Then drag the same item again--kiss IE7 good bye!</h1>

<div id="tabMe">
    <ul>
        <li>
            <a href="#tabOne">Tab One</a>
        </li>
        <li>
            <a href="#tabTwo">Tab Two</a>
        </li>
    </ul>
    <div id="tabOne">
        <div>
        <p class="drag-me">Drag me</p>
        <p class="drag-me">Or, drag me</p>
        </div>
                <div>
        <p class="drag-me">Drag me3</p>
        <p class="drag-me">Or, drag me3</p>
        </div>
    </div>
    <div id="tabTwo">
        <p>Some Tab Two Content</p>
    </div>
</div>

JavaScript

/*
 * Doesn't matter whether you tab the container first, or make the items draggable first--same result
 */

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

$( '.drag-me' ).draggable( {
    helper: 'clone',
    scroll: true,
    revert: 'invalid',
    revertDuration: 250,
    opacity: 0.6,
    greedy: true,
    cursorAt: { top : 5 }
} );