2011-02-14 7 views
0

ChromeのjQuery Draggableにバグがあり、FirefoxやInternet Explorerには存在しません。私はdiv#drag-container/450x80 /​​と3つのドラッグ可能なオブジェクトを内部に持っています。/150x0 /に移動し、最も低いポイントに移動すると、それらを下にドラッグして、位置0,80 + 14 = 0,94ピクセルを下にドラッグします。私はそれらをさせ、ドラッグし、彼らは再び14 pxを下げる。jQuery Draggable - 封じ込めの解除 - Chrome Bug

修正はありますか?

の作業のデモ:ここhttp://jsfiddle.net/ucmqq/ コードです:

<style> 
    .draggable { width: 150px; height: 0px; cursor:move; } 
    <?PHP if($userinfo->use_colors != '0'): ?> 
    #drag-container { width: 450px; height:80px; background-color:<?=$userinfo->background?>; } 
    <?PHP else: ?> 
    #drag-container { width: 450px; height:80px; background:url(/backgrounds/<?=$userinfo->image?>); } 
    <?PHP endif; ?> 
    </style> 

    <script language="javascript"> 

    $(function() { 
     $("#draggable").draggable({ cursor: "move",containment: 'parent', scroll: false, 
     stop: function() { 
     document.settings.np_x.value = $(this).css('left'); 
     document.settings.np_y.value = $(this).css('top'); 
     } 
            }); 
     $("#draggable2").draggable({ cursor: "move",containment: 'parent', scroll: false , 
     stop: function() { 
     document.settings.artist_x.value = $(this).css('left'); 
     document.settings.artist_y.value = $(this).css('top'); 
     } 
            }); 
     $("#draggable3").draggable({ cursor: "move",containment: 'parent', scroll: false , 
     stop: function() { 
     document.settings.other_x.value = $(this).css('left'); 
     document.settings.other_y.value = $(this).css('top'); 
     } 
            }); 
    }); 

    </script> 


<div id="drag-container"> 
    <div id="draggable" class="draggable" style="position:relative;top:5px;left:80px;"> 
     .::[ NowPlaying SIGnature ]::. 
    </div> 
    <div id="draggable2" class="draggable" style="position:relative;top:25px;left:80px;"> 
     Artist - title 
    </div> 
    <div id="draggable3" class="draggable" style="position:relative;top:45px;left:80px;"> 
     Album: (Year) 
     <br> 
     Genre: 
    </div> 

</div> 

答えて

1

問題は、ドラッグ可能なオブジェクトの高さは、高さ1と0であるということでしたが、再びそれはバギーですが、すべてで高させずに、それは大丈夫です。

0

私は同じバグがありましたが、私の場合、ドラッグ可能な要素の高さはありませんでした。私の場合はブートストラップを使いましたが、要素を別のcol-md-3 divsにドラッグしようとしました。この問題は、col-md-3のfloatプロパティにあるfloatにあります。だから私はそれを削除し、使用しなければならなかったdisplay: inline-block; vertical-align: top;

多分それは誰かを助けるでしょう。