Demo of helper option for Dragging elements in JQuery UI

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>Clone</button><button  id=b2>Original</button><br>
<div id=d1></div>

jquery

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