jQuery draggable + toggleClassの問題

ここでの問題は、toggleClassの位置のトップです。0px;左：0pxはトリガされません..幅と高さと背景色のみがアクティブになります.. div（ドラッグ可能）をドラッグしないとうまくいきます。もし要素をドラッグし始めると、効果..私はjQuery draggable + 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

ドラッグ可能なものは、あなたの位置に干渉している。これを助けるためにjqueryの中に、このような機能があるかどう知りません。 Draggableはstyle属性を使用してleftとtop CSSを割り当て、<div>をドラッグするとstyle属性がclass属性の値よりも優先されます。あなたは!importantを使用することによってこの問題を回避することができます：もちろん

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

、<div>はhiクラスは、ドラッグがやろうとしているものより優先されます!important位置として追加されるとドラッグできなくなります。

WebKitの "inspect element"は、HTML/CSSを整理するために私が見つけたものよりも優れていて、テストやデバッグのために自分自身をWebKitブラウザ（ChromeやSafariなど）にすることをお勧めします。問題。

出典

2010-12-21 05:56:26

私の問題を解決する..ありがとうございました。：D –

jQuery draggable + toggleClassの問題

答えて

関連する問題