JSFiddle - React, Tailwind, and code Playground

by uttara

HTML

<div class="draggable">draggable only downwards</div>

CSS

.draggable {
    position:absolute;
    top:0px;
    background:pink;
    height:100px;
    width:100%;
    left: 0px;
    text-align:center;
}

JavaScript

$('.draggable').draggable({
    axis: "y"
});


$('.draggable').on('mousedown', function() {
		var x1 = x2 = $(".draggable").position().left;
		var y1 = $(".draggable").position().top;
		var y2 = ($(window).height() + $(".draggable").position().top);
		$(".draggable").draggable('option', 'containment', [x1, y1, x2, y2]);
	});