Demo of reading and updating curor option for Dragging elements

Crosshair Pointer Text Move Wait Help Progress



Select Cursor style by clicking the button and then move the element. Keep changing the style of cursor.

HTML

<div id="draggable" class='drg_box'>
  <p>Drag me around</p>
</div>
<br><br>
<button  id=b1 class=my_button>Crosshair</button> <button  id=b2 class=my_button>Pointer</button> <button  id=b3 class=my_button>Text</button> 
<button  id=b4 class=my_button>Move</button> <button  id=b5 class=my_button>Wait</button> <button  id=b6 class=my_button>Help</button> <button  id=b7 class=my_button>Progress</button>
<br><br>
<div id=d1></div>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#draggable" ).draggable({
cursor: "pointer"
});
//////
//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "cursor", "crosshair" );
var cursor = $( ".drg_box" ).draggable( "option", "cursor" );
$('#d1').html("cursor  value is " + cursor);
})
///////////
//////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "cursor", "pointer" );
var cursor = $( ".drg_box" ).draggable( "option", "cursor" );
$('#d1').html("cursor  value is " + cursor);
})
///////////
//////
$("#b3").click(function(){
$( ".drg_box" ).draggable( "option", "cursor", "text" );
var cursor = $( ".drg_box" ).draggable( "option", "cursor" );
$('#d1').html("cursor  value is " + cursor);
})
///////////
//////
$("#b4").click(function(){
$( ".drg_box" ).draggable( "option", "cursor", "move" );
var cursor = $( ".drg_box" ).draggable( "option", "cursor" );
$('#d1').html("cursor  value is " + cursor);
})
///////////
//////
$("#b5").click(function(){
$( ".drg_box" ).draggable( "option", "cursor", "wait" );
var cursor = $( ".drg_box" ).draggable( "option", "cursor" );
$('#d1').html("cursor  value is " + cursor);
})
///////////
//////
$("#b6").click(function(){
$( ".drg_box" ).draggable( "option", "cursor", "help" );
var cursor = $( ".drg_box" ).draggable( "option", "cursor" );
$('#d1').html("cursor  value is " + cursor);
})
///////////
//////
$("#b7").click(function(){
$( ".drg_box" ).draggable( "option", "cursor", "progress" );
var cursor = $( ".drg_box" ).draggable( "option", "cursor" );
$('#d1').html("cursor  value is " + cursor);
})
///////////
var cursor = $( ".drg_box" ).draggable( "option", "cursor" );
$('#d1').html("cursor  value is " + cursor);

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