JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="test">
<div class="foo">
<input type="text" value="" />
<button class="move">move</button><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<textarea rows="5" cols="30"></textarea>
</div>
<div class="foo">
<input type="text" value="" />
<button class="move">move</button><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<textarea rows="5" cols="30"></textarea>
</div>
<div class="foo">
<input type="text" value="" />
<button class="move">move</button><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<textarea rows="5" cols="30"></textarea>
</div>
<div class="foo">
<input type="text" value="" />
<button class="move">move</button><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<input type="text" value="" /><br />
<textarea rows="5" cols="30"></textarea>
</div>
</div>
CSS
.foo{
background: #E7E7E7;
margin-bottom: 25px;
border-bottom: 4px solid #7A7A7A;
}
.ui-state-highlight {
height: 1.5em;
line-height: 1.2em;
}
.ui-sortable-helper,
.goooo{
height: 24px!important;
overflow:hidden;
margin-bottom: 7px;
border-bottom: 0;
}
JavaScript
jQuery('#test').sortable({
placeholder: 'ui-state-highlight',
items: '> div.foo',
distance: 5,
handle: '.move',
cancel: '',
start: function () {
jQuery(this).children('.foo').addClass('goooo');
},
beforeStop: function () {
jQuery(this).children('.foo').removeClass('goooo');
}
});
jQuery( "#test" ).disableSelection();