JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<table>
<tr><td>0</td></tr>
<tr class='row'><td>1</td></tr>
<tr class='row'><td class='cell'>2</td></tr>
<tr class='row'><td>3</td></tr>
<tr><td>4</td></tr>
</table>

CSS

.dragged {
  background-color: red;
}

.cell {
  background-color: yellow;
}

td {
  background-color: green;
  width: 10em;
}

JavaScript

$(document).ready(function() {
	$(".cell").draggable({
    cursor: 'crosshair',
    revert: true,
    helper: function(ui) {return $(this)},
    axis: 'y',
  	start: function (event, ui) {
			ui.helper.toggleClass('dragged');
			var mintop = Number.MAX_VALUE;
			var maxbottom = 0;
			$('.row').each(function(i, val) {
				
				var offset = $(val).offset();
				var box    = val.getBoundingClientRect();
				
				mintop    = Math.min(mintop,    offset.top);
				maxbottom = Math.max(maxbottom, offset.top + box.height);
			});
			
			var box    = this.getBoundingClientRect();
	
			$(this).data('custom-containment', [mintop, maxbottom - box.height]);
		},
    drag: function(event, ui) {
    	var customContainment = $(this).data('custom-containment');
    	ui.position.top = Math.max(customContainment[0],
      	Math.min(customContainment[1], ui.offset.top)
      ) - (ui.offset.top - ui.position.top);
    },
    stop: function(event, ui) {
    	ui.helper.toggleClass('dragged');
    }
	});  
});