the problem here is that the toggleClass
position top:0px; left:0px will not trigger.. only the width and height and background-color will activate.. it will work if i will not drag the div(draggable).. if i start to drag the element, the toggled class positioning will not effect.. i dont know if there's such a function in jquery to help this..
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui.resizable.js"></script>
<script type="text/javascript" src="jquery.ui.draggable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#x").draggable().dblclick(function(){
$(this).toggleClass("hi");
});
});
</script>
<style>
.hello {
background:red;
width:200px;
height:200px;
position:relative;
top:100px;
left:100px;
}
.hi {
background:yellow;
position:relative;
width:300px;
height:300px;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div id="x" class="hello">
</div>
</body>
</html>
