Demo of Dragging elements containment to Array of coordinates in JQuery

HTML

<div id="draggable" class='drg_box'>
  *
</div>
<br><br><br><br><br><br><br>
<div id=d1></div>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#draggable" ).draggable({
	containment: [400,100,600,300],
  drag: function( event, ui ) {
//ui.position.left = Math.min( 500, ui.position.left );
$('#d1').html("X: " + ui.position.left  + ",<br> Y: " + ui.position.top)
}
});

///////////
})
</script>