jQuery draggable + toggleClass problem
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/ja开发者_开发知识库vascript" 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>
The draggable stuff is interfering with your positioning. Draggable will assign specific left and top CSS via a style attribute as you drag the the <div> around, style attributes override the values that come from the class attribute. You can get around this by using !important:
.hi {
background: yellow;
position: relative;
width: 300px;
height: 300px;
top: 0px !important;
left: 0px !important;
}
Of course, the <div> will cease to be draggable once the hi class is added as the !important positions will override what the draggable is trying to do.
I'd recommend that you get yourself a WebKit browser (such as Chrome or Safari) for testing and debugging, WebKit's "inspect element" is awesome and better than anything else I've come across for sorting out HTML/CSS issues.
加载中,请稍侯......
精彩评论