JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:300px; height:200px; background:#333; font-size:14px;color: #fff;" id="draggable">
<ul>
    <li>One item</li>
    <li>One item</li>
    <li>One item</li>
    <li>One item</li>
    <li>One item</li>
    <li>One item</li>
    <li>One item</li>
    <li>One item</li>
    <li>One item</li>
    <li>One item</li>
</ul>
</div>

JavaScript

$('#draggable').live('mouseover',function(){
    $(this).draggable({
                    axis: "y",
        drag: function( event, ui ) {
 			// Keep the left edge of the element
			// at least 100 pixels from the container
			ui.position.top = Math.min( 20, ui.position.top );
			alert(ui.position.top);
            //ui.position.bottom = Math.max(100, ui.position.bottom );
		}
    });
});