Demo of Dragging elements using distance option JQuery UI

10 px 50 px 100 px 150 px 200 px 300 px 400 px



Dragging will start only after movement of cursor ( with mouse down ) specified distance in pixel. Change the setting by clicking the button

STYLE

<style>
.drg_box{ 
position: relative;
FONT-SIZE: 14px;
font-family: Verdana;
padding:5px;
width:100px;
height: 100px;
background-color: #ffff00;
border: 2px solid red;
border-radius: 5px;
}
</style>

HTML

<div id="draggable" class='drg_box'>
  <p>Drag me around</p>
</div>
<br><br>
<button  id=b1 class=my_button>10 px</button> <button  id=b2 class=my_button>50 px</button> <button  id=b3 class=my_button>100 px</button> 
<button  id=b4 class=my_button>150 px</button> <button  id=b5 class=my_button>200 px</button> <button  id=b6 class=my_button>300 px</button> <button  id=b7 class=my_button>400 px</button>
<br><br>
<div id=d1></div>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#draggable" ).draggable({
distance:5
});
//////
//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "distance", 10 );
var distance = $( ".drg_box" ).draggable( "option", "distance" );
$('#d1').html("distance : " + distance);
})
///////////
//////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "distance", 50 );
var distance = $( ".drg_box" ).draggable( "option", "distance" );
$('#d1').html("distance : " + distance);
})
///////////
//////
$("#b3").click(function(){
$( ".drg_box" ).draggable( "option", "distance", 100 );
var distance = $( ".drg_box" ).draggable( "option", "distance" );
$('#d1').html("distance : " + distance);
})
///////////
//////
$("#b4").click(function(){
$( ".drg_box" ).draggable( "option", "distance", 150 );
var distance = $( ".drg_box" ).draggable( "option", "distance" );
$('#d1').html("distance : " + distance);
})
///////////
//////
$("#b5").click(function(){
$( ".drg_box" ).draggable( "option", "distance", 200 );
var distance = $( ".drg_box" ).draggable( "option", "distance" );
$('#d1').html("distance : " + distance);
})
///////////
//////
$("#b6").click(function(){
$( ".drg_box" ).draggable( "option", "distance", 300 );
var distance = $( ".drg_box" ).draggable( "option", "distance" );
$('#d1').html("distance : " + distance);
})
///////////
//////
$("#b7").click(function(){
$( ".drg_box" ).draggable( "option", "distance", 400 );
var distance = $( ".drg_box" ).draggable( "option", "distance" );
$('#d1').html("distance : " + distance);
})
///////////
var distance = $( ".drg_box" ).draggable( "option", "distance" );
$('#d1').html("distance : " + distance);
///////////
})
</script>