Demo of Dragging elements with axis option set to x or y in JQuery

Set to x AxisSet to y Axis

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>

<button  id=b1 class=my_button>Set to x Axis</button><button  id=b2 class=my_button>Set to y Axis</button><br><br>
<div id=d1 style="position: absolute;"></div>

jquery

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