JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<div class="container">
    <fieldset>
        <legend>handle 1 works</legend>
        <div>blah<br /></div>
    </fieldset>
    <fieldset>
        <legend>handle 2 works</legend>
        <div>blah<br /></div>
    </fieldset>
</div>
<div class="container">
    <fieldset>
        <legend>handle 1 THIS CAN'T BE DRAGGED BELOW HANDLE 2</legend>
        <div>blah<br /></div>
    </fieldset>
    <fieldset>
        <legend>handle 2 BUT I CAN DRAG THIS ABOVE HANDLE 1</legend>
        <div style="display: none">blah<br /></div>
    </fieldset>
</div>
<div class="container">
    <fieldset>
        <legend>handle 1 works</legend>
        <div style="display: none">blah<br /></div>
    </fieldset>
    <fieldset>
        <legend>handle 2 works</legend>
        <div style="display: none">blah<br /></div>
    </fieldset>
</div>

CSS

fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}
.container{
    border: 1px solid red;
}

JavaScript

$(".container").sortable({
    axis: 'y',
    handle: '> legend',
    containment: 'parent',
    tolerance: 'pointer',
    //the next few options did not solve the problem
    /*forcePlaceholderSize: true,
    cursorAt: {top: 1},
    start: function(event, ui) {
        ui.placeholder.height(ui.item.height());
        $(this).sortable('refreshPositions');
    },*/
});