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;
}
.ui-draggable {
position: relative;
border: 2px solid #000;
padding: 6px;
background: #00ffff;
}
</style>
<div id="draggable" class='drg_box'>
<p>Drag me around</p>
</div>
<br>During Initialization addClasses is set to false <button id=b1 class=my_button>AddClass</button><br>
<div id=d1 style="position: absolute;"></div>
<script>
$(document).ready(function() {
////////////////
$( function() {
$( "#draggable" ).draggable({
addClasses: false
});
});
//////
$("#b1").click(function(){
var addClasses = $( ".drg_box" ).draggable( "option", "addClasses" );
$('#d1').html("addClass value is " + addClasses);
$( ".drg_box" ).draggable( "option", "addClasses", false );
$("#draggable").addClass("ui-draggable")
})
///////////
})
</script>