jQuery可拖动+ toggleClass问题

这里的问题在于toggleClass位置top：0px;左：0px不会触发..只有宽度和高度和背景颜色将激活..它将工作，如果我不会拖动div（可拖动）..如果我开始拖动元素，切换的类定位将不会效果..我不知道是否有jQuery中，以帮助这个这样的功能..jQuery可拖动+ toggleClass问题

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

来源

2010-12-21 Vincent Dagpin

的可拖动的东西与你的定位干扰。在拖动<div>时，Draggable将通过style属性分配特定的left和top CSS，style属性覆盖来自class属性的值。您可以通过使用!important解决这个问题：

.hi { 
    background: yellow; 
    position: relative; 
    width: 300px; 
    height: 300px; 
    top: 0px !important; 
    left: 0px !important; 
}

当然，<div>将停止一旦hi类添加为!important位置将覆盖哪些拖动试图做的是拖动。

我建议您为自己的WebKit浏览器（例如Chrome或Safari）进行测试和调试，WebKit的“检查元素”非常棒，比我在整理HTML/CSS时遇到的其他任何问题都更好的问题。

来源

2010-12-21 05:56:26

谢谢先生..解决我的问题..：D – 2010-12-21 06:17:48

jQuery可拖动+ toggleClass问题

回答

相关问题