Demo of Dragging elements with addClasses option in JQuery

Drag me around


During Initialization addClasses is set to false

CSS

<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>

HTML


<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>

jquery

<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>