Demo of Dragging elements cursorAt option in JQuery

Left 20 Right 20 Top 20 Bottom 20 Left 40, Top 20 Right 40, Bottom 40 Left 50, Bottom 50



Select CursorAt position by clicking the butoon and then move the element. Keep changing the position of cursor.

HTML

<div id="draggable" class='drg_box'>
  <p>Drag me around</p>
</div>
<br><br>
<button  id=b1 class=my_button>Left 20</button> <button  id=b2 class=my_button>Right 20</button> <button  id=b3 class=my_button>Top 20</button> 
<button  id=b4 class=my_button>Bottom 20</button> <button  id=b5 class=my_button>Left 40, Top 20</button> <button  id=b6 class=my_button>Right 40, Bottom 40</button> <button  id=b7 class=my_button>Left 50, Bottom 50</button>
<br><br>
<div id=d1></div>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#draggable" ).draggable({
cursor: "crosshair",
cursorAt: false
});
//////
//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "cursorAt", {left:20} );
var cursorAt = $( ".drg_box" ).draggable( "option", "cursorAt" );
$('#d1').html("cursorAt left : " + cursorAt.left + ", right : " + cursorAt.right + ", Top : " + cursorAt.top+ ", bottom : " + cursorAt.bottom);
})
///////////
//////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "cursorAt", {right:20} );
var cursorAt = $( ".drg_box" ).draggable( "option", "cursorAt" );
$('#d1').html("cursorAt left : " + cursorAt.left + ", right : " + cursorAt.right + ", Top : " + cursorAt.top+ ", bottom : " + cursorAt.bottom);
})
///////////
//////
$("#b3").click(function(){
$( ".drg_box" ).draggable( "option", "cursorAt", {top:20} );
var cursorAt = $( ".drg_box" ).draggable( "option", "cursorAt" );
$('#d1').html("cursorAt left : " + cursorAt.left + ", right : " + cursorAt.right + ", Top : " + cursorAt.top+ ", bottom : " + cursorAt.bottom);
})
///////////
//////
$("#b4").click(function(){
$( ".drg_box" ).draggable( "option", "cursorAt", {bottom:20} );
var cursorAt = $( ".drg_box" ).draggable( "option", "cursorAt" );
$('#d1').html("cursorAt left : " + cursorAt.left + ", right : " + cursorAt.right + ", Top : " + cursorAt.top+ ", bottom : " + cursorAt.bottom);
})
///////////
//////
$("#b5").click(function(){
$( ".drg_box" ).draggable( "option", "cursorAt", {left:40,top:20} );
var cursorAt = $( ".drg_box" ).draggable( "option", "cursorAt" );
$('#d1').html("cursorAt left : " + cursorAt.left + ", right : " + cursorAt.right + ", Top : " + cursorAt.top+ ", bottom : " + cursorAt.bottom);
})
///////////
//////
$("#b6").click(function(){
$( ".drg_box" ).draggable( "option", "cursorAt", {right:40,bottom:40} );
var cursorAt = $( ".drg_box" ).draggable( "option", "cursorAt" );
$('#d1').html("cursorAt left : " + cursorAt.left + ", right : " + cursorAt.right + ", Top : " + cursorAt.top+ ", bottom : " + cursorAt.bottom);
})
///////////
//////
$("#b7").click(function(){
$( ".drg_box" ).draggable( "option", "cursorAt", {left:50,bottom:50} );
var cursorAt = $( ".drg_box" ).draggable( "option", "cursorAt" );
$('#d1').html("cursorAt left : " + cursorAt.left + ", right : " + cursorAt.right + ", Top : " + cursorAt.top+ ", bottom : " + cursorAt.bottom);
})
///////////
var cursorAt = $( ".drg_box" ).draggable( "option", "cursorAt" );
$('#d1').html("cursorAt left : " + cursorAt.left + ", right : " + cursorAt.right + ", Top : " + cursorAt.top+ ", bottom : " + cursorAt.bottom);

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