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

回答

相關問題