jQuery Draggable：Image Flicker

Question

私はImage Panningツールを開発していました。親切なメンバーがjQuery用のドラッグ可能なプラグインに私を誘導した後、私はそのほとんどを完成させました。現在、ユーザーが画像（約300ピクセル×300ピクセルのdiv内に含まれています）をドラッグすると、画像は最初にちらつき、パンします。この問題は、マウスの移動イベントのマウスのダウンイベントの後に発生するようです。画像はマウス移動の4つのコーナーの1つに移動し、特定の領域に移動すると別のシフトが発生します。私はgoogleを通して何かを見つけることができませんでした、そして、私はまだ比較的jQueryに新しいです。

は、私は私の説明があまりにも曖昧である場合には、ここにコードをアップロードしました： http://www.studentgroups.ucla.edu/csa/test/zoom.htm

任意のアイデアやアドバイスは大歓迎です！

Answer 1

の場合、jQueryプラグインと独自のコードの両方で画像をドラッグ可能にしています。あなたのコードはdivのbackground-positionを変更しており、jQueryプラグインはdivの実際の位置を変更しています。それはいくつかの問題を引き起こす可能性があります。

また、Draggableのcontainmentパラメータは、親コンテナよりも小さいドラッグ可能なアイテムに対して設計されているように見えます。

はとにかく、ここで働いコードです：あなたは、エッジ・スナップを必要としない場合

$(document).ready(function() { 
    $(".draggable").draggable().bind('dragstop', function(e, ui) { 
     if (ui.position.top > 0) { 
      $(this).css('top', 0); 
     } 
     if (ui.position.left > 0) { 
      $(this).css('left', 0); 
     } 

     var bottom = -($(this).height() - $(this).parent().height()), 
     right = -($(this).width() - $(this).parent().width()); 

     if (ui.position.top < bottom) { 
      $(this).css('top', bottom); 
     } 
     if (ui.position.left < right) { 
      $(this).css('left', right); 
     } 
    }); 
}); 

、あなたが.bind()機能を取り除くことができ、そしてちょうど.draggable()を呼び出します。

$(document).ready(function() { 
    $(".draggable").draggable(); 
});