Demo of revertDuration option for Dragging elements in JQuery UI

revertDuration : 1000 revertDuration 2000 revertDuration ++ revertDuration --




The duration of revert to original position can be set to different values by using buttons. Higher the duration ( in milliseconds) slow will be the return process.

HTML

<div id="draggable" class='drg_box'>
  <p>Drag me around</p>
</div>
<br><br><br><br><br><br><br>
<button  id=b1>revertDuration : 1000 </button><button  id=b2>revertDuration 2000</button>  <button  id=b3>revertDuration ++</button> <button  id=b4>revertDuration --</button><br>
<div id=d1></div>

jquery

<script>
$(document).ready(function() {
	var increment=+500; 
////////////////
$( "#draggable" ).draggable({
revert:true,
revertDuration: 5000
});
//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "revertDuration", 1000 );
var revertDuration = $( ".drg_box" ).draggable( "option", "revertDuration" );
$('#d1').html("revertDuration value is " + revertDuration);
})
//////////////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "revertDuration", 2000 );
var revertDuration = $( ".drg_box" ).draggable( "option", "revertDuration" );
$('#d1').html("revertDuration value is " + revertDuration);
})
//////////////
//////////////
$("#b3").click(function(){
var revertDuration = parseFloat($( ".drg_box" ).draggable( "option", "revertDuration" ));
revertDuration = revertDuration + increment;
$( ".drg_box" ).draggable( "option", "revertDuration", revertDuration );
$('#d1').html("revertDuration value is " + revertDuration);
})
//////////////
//////////////
$("#b4").click(function(){
var revertDuration = parseFloat($( ".drg_box" ).draggable( "option", "revertDuration" ));
revertDuration = revertDuration - increment;
$( ".drg_box" ).draggable( "option", "revertDuration", revertDuration );
$('#d1').html("revertDuration value is " + revertDuration);
})
//////////////
var revertDuration = $( ".drg_box" ).draggable( "option", "revertDuration" );
$('#d1').html("revertDuration value is " + revertDuration);
/////
})
</script>