JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://mytinder.com/stylesheets/manage-build.css">
<ul id="sort_sections" class="sections ui-sortable">
<li class="section" id="section_42">
<div class="section-header" id="section_header_42">
<span class="collapse"></span>
<div class="section-name">
<span class="name">Empty</span>
</div>
<span class="dragger"></span>
<div class="clear">
</div>
</div>
<div class="section-holder">
<ul id="sort_content_42" class="section-content ui-sortable">
</ul>
</div>
</li>
<li class="section" id="section_41">
<div class="section-header" id="section_header_41">
<span class="collapse"></span>
<div class="section-name">
<span class="name">Empty</span>
</div>
<span class="dragger"></span>
<div class="clear">
</div>
</div>
<div class="section-header-edit" id="header_edit_#<Section:0x105487f28>" style="display: none;">
</div>
<div class="section-holder">
<ul id="sort_content_41" class="section-content ui-sortable">
<li class="content" id="content_105" style="position: relative; "> <a class="edit" href="#" id="content_name_105">New Content</a> <span class="dragger"></span>
<div class="clear">
</div>
</li>
</ul>
</div>
</li>
</ul>
JavaScript
var $j = jQuery.noConflict();
$j("#sort_content_42,#sort_content_41,#sort_content_39,#sort_content_40").sortable({
connectWith: '.section-content',
dropOnEmpty: true,
axis: 'y',
zIndex: 1004,
cursor: 'crosshair',
});
$j("#sort_sections").sortable({
placeholder: "ui-state-highlight",
connectWith: '.sections',
axis: 'y',
zIndex: 1003,
cursor: 'crosshair',
});
$j(function() {
$j( "section-content" ).sortable({
connectWith: "section-content",
dropOnEmpty: true
});
$j( ".section-content" ).disableSelection();
});