Demo of scroll option for the Dragging elements in JQuery

Drag me around











HTML

<div id="draggable" class='drg_box'>
  <p>Drag me around</p>
</div>
<br><br><br><br><br><br><br>
<button  id=b1>scroll: true </button><button  id=b2>scroll : false</button>  <br><br><br>
<div id=d1></div>

jquery

<script>
$(document).ready(function() {
////////////////
$( ".drg_box" ).draggable({
scroll: true
});
//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "scroll", true );
var scroll = $( ".drg_box" ).draggable( "option", "scroll" );
$('#d1').html("scroll value is " + scroll);
})
///////////

//////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "scroll", false );
var scroll = $( ".drg_box" ).draggable( "option", "scroll" );
$('#d1').html("scroll value is " + scroll);
})
///////////
var scroll = $( ".drg_box" ).draggable( "option", "scroll" );
$('#d1').html("scroll value is " + scroll);

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