jQueryのドラッグ可能な機能を利用しています。ビューポートdivは、ウィンドウ全体のサイズです。ビューポート内にはドラッグ可能なコンテナdivがあり、ビューポート自体よりもはるかに大きく、ウィンドウを通してコンテナの小さな部分を見る感覚を与えます。コンテナは、ドラッグ可能なオブジェクトdivを保持します。
現在、コンテナdivを適切にドラッグしており、オブジェクトdivもビューポートdivを適切にドラッグしています。私が抱えている問題は、オブジェクトdivがビューポートdivのエッジの特定のピクセル範囲内にある場合に、ビューポートを「プッシュ」したいということです。
JQueryのドラッグ可能な関数には、オブジェクトで利用しようとしているドラッグイベントがあります。ビューポートをスクロールさせることはできますが、スクロールを続けるには、マウスが常にオブジェクトを動かし続ける必要があります。オブジェクトをピクセル範囲内に収め、マウスを動かせずにスクロールできるようにしたいと考えています。自分の要件に本当に合った解決策が見つからないようで、今は途方に暮れています。どんな助けでも大いに感謝され、私の感謝の気持ちで報われるでしょう。
私が行っていることの例を見るには、http：//jsfiddle.net/trVZA/10/にアクセスしてください。赤いボックスをドラッグすると、黒いオブジェクトがドラッグされます。オブジェクトのドラッグイベントに関するコードをコメントアウトしました。ブラウザが完全にフリーズするためですが、私の間違いを確認するためにあります。オブジェクトが壁に近づいたら、背景の水の画像をスクロールさせたいです。