Demo of opacity option for Dragging elements in JQuery UI

Opacity : 0.25 Opacity 0.85 Opacity ++ Opacity --

HTML

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

jquery

<script>
$(document).ready(function() {
////////////////
	var increment=+0.05; 
////////////////
$( "#draggable" ).draggable({
opacity: 0.45
});
//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "opacity", 0.25 );
var opacity = $( ".drg_box" ).draggable( "option", "opacity" );
$('#d1').html("opacity value is " + opacity);
})
//////////////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "opacity", 0.85 );
var opacity = $( ".drg_box" ).draggable( "option", "opacity" );
$('#d1').html("opacity value is " + opacity);
})
//////////////
//////////////
$("#b3").click(function(){
var opacity = parseFloat($( ".drg_box" ).draggable( "option", "opacity" ));
opacity = opacity + increment;
opacity = opacity.toFixed(2);
$( ".drg_box" ).draggable( "option", "opacity", opacity );
$('#d1').html("opacity value is " + opacity);
})
//////////////
//////////////
$("#b4").click(function(){
var opacity = parseFloat($( ".drg_box" ).draggable( "option", "opacity" ));
opacity = opacity - increment;
opacity =opacity.toFixed(2);
$( ".drg_box" ).draggable( "option", "opacity", opacity );
$('#d1').html("opacity value is " + opacity);
})
//////////////
var opacity = $( ".drg_box" ).draggable( "option", "opacity" );
$('#d1').html("opacity value is " + opacity);
/////

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