Demo of Dragging elements with delay option in JQuery

500ms 1000ms 2000ms 3000ms 4000ms 5000ms 6000ms



Delay : Time lapse between mouse drag motion and actual movement of the element in milliseconds
Set the delay option by clicking the butoon and then move the element. Keep changing the delay option.

HTML

<div id="draggable" class='drg_box'>
  <p>Drag me around</p>
</div>
<br><br>
<button  id=b1 class=my_button>500ms</button> <button  id=b2 class=my_button>1000ms</button> <button  id=b3 class=my_button>2000ms</button> 
<button  id=b4 class=my_button>3000ms</button> <button  id=b5 class=my_button>4000ms</button> <button  id=b6 class=my_button>5000ms</button> <button  id=b7 class=my_button>6000ms</button>
<br><br>
<div id=d1></div>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#draggable" ).draggable({
delay:1000
});
//////
//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "delay", 500 );
var delay = $( ".drg_box" ).draggable( "option", "delay" );
$('#d1').html("delay : " + delay);
})
///////////
//////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "delay", 1000 );
var delay = $( ".drg_box" ).draggable( "option", "delay" );
$('#d1').html("delay : " + delay);
})
///////////
//////
$("#b3").click(function(){
$( ".drg_box" ).draggable( "option", "delay", 2000 );
var delay = $( ".drg_box" ).draggable( "option", "delay" );
$('#d1').html("delay : " + delay);
})
///////////
//////
$("#b4").click(function(){
$( ".drg_box" ).draggable( "option", "delay", 3000 );
var delay = $( ".drg_box" ).draggable( "option", "delay" );
$('#d1').html("delay : " + delay);
})
///////////
//////
$("#b5").click(function(){
$( ".drg_box" ).draggable( "option", "delay", 4000 );
var delay = $( ".drg_box" ).draggable( "option", "delay" );
$('#d1').html("delay : " + delay);
})
///////////
//////
$("#b6").click(function(){
$( ".drg_box" ).draggable( "option", "delay", 5000 );
var delay = $( ".drg_box" ).draggable( "option", "delay" );
$('#d1').html("delay : " + delay);
})
///////////
//////
$("#b7").click(function(){
$( ".drg_box" ).draggable( "option", "delay", 6000 );
var delay = $( ".drg_box" ).draggable( "option", "delay" );
$('#d1').html("delay : " + delay);
})
///////////
var delay = $( ".drg_box" ).draggable( "option", "delay" );
$('#d1').html("delay : " + delay);

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