Answering my own question (other alternative in addition to above answer) so as to help others
Taking a specific case say allow dragging only downwards when axis:'y'
<div class="draggable">draggable only downwards</div>
css
.draggable {
position:absolute;
top:0px;
background:pink;
height:100px;
width:100%;
left: 0px;
text-align:center;
}
script
$('.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]);
});