2012-01-17 11 views
3

jqueryはスクロール可能ですが、スクロール可能なので親になることはありません。私がそれを動かすようにドラッグすると、身体が幅を越えて自動スクロールするようになり、物が動いているように見えます。スクロールするとjquery draggable auto scrollが消えます

しかし、このポイントの後で私の要素をクリックすると、「奇妙な」位置になり、消えるように見えます(負の値に設定されている場所と関係しています)。

jqueryの例でさえ、これを助けるために非常に背の高い(狭い)divを貼り付けていることに気付きました。本当の問題がある

<html> 
<head> 
    <script type="text/javascript"> 
     $(function() { 
      $(".blueguy").draggable(); 
      $(".greenguy").draggable({ scroll: false, containment: 'parent' }); 
     }); 
    </script> 

    <style type="text/css"> 
     .blueguy { 
     background-color: #0000ff; 
     } 
     .greenguy { 
     background-color: #00ff00; 
     } 
    </style> 

</head> 
<body style="height:100%;"> 
<div style="height:100%;"> 
<div class="blueguy" style="width:300px; height:150px;">Drag me "off screen" such that the browser window auto scrolls. Then click on me and I dissapear</div> 
<div class="greenguy" style="width:300px; height:150px;">I am constrained to the be contained within my parent</div> 


</div> 
</body> 
</html> 

:なぜhttp://hortitude.com/samples/drag_and_drop/drag_drop.html

関連するソースコード:しかし、彼らの例では、ここで

は私が参照してる何へのリンクですwell.oとして水平に動作するようですこれが起こる?私はこれを回避することができることは分かっていますが、私はこれを見る理由について興味がありますか?

さらに、他の良い回避策があるかどうかを知ることは興味深いでしょう。

答えて

2

私はこの現象を再現できます。クリックしても起こらないのですが、要素を画面の外にドラッグして、その要素を後ろにドラッグしようとすると起こります。 最後にスクロールすると効果がさらに強くなります。そのため、要素を画面の外にドラッグすると、まずスクロールバーを右に置き、項目を左にドラッグして戻します。

実際の質問は何ですか?

それは私にちょっとバギーです。オフスクリーンのスクロールは、jquery ui draggableでちょっと面倒なようです。

面白いのは..私はコンテナに両方のdivをラップし、「スクロールバック」は極端に速いが、アイテムはマウスの下から離れないので、何も「消える」ことはない。ここをクリックしてくださいhttp://jsfiddle.net/hFAru/17/。 これはあなたのための修正のようなものでしょうか?ここ

+0

参照編集を使用してみてください。 – Hortitude

+0

あなたのCSSが実際に違いがあったように見えます。 (上記の私の例はラッパーコンテナも持っていたことに注意してください)。助けてくれてありがとう! – Hortitude

1

はそのバグのチケットです:

http://bugs.jqueryui.com/ticket/5718

悪いニュースは、このチケットは2年や開発者からのフィードバックなしのためにそこにあったことです。

このバグを回避するための回避策を見つけました。ドラッグ可能な要素にposition:absoluteを追加しています。ここで

あなたが例を見つけることができます:http://jsfiddle.net/hMdZj/

1

は、質問のために、この

$(".selector").draggable({ helper: "clone" }); 
関連する問題