Drag me around
<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>
<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>
<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>