スクロール可能な画像パネルを作るために固定divに画像を表示する方法は？

Question

固定幅/高さのボックスに画像を表示するフォトギャラリースクリプトを作成しています。今私はそのイメージを完全なサイズで表示したい。つまり、ボックスが700x300pxの場合、画像は700x300にサイズ変更するべきではありませんが、独自のフル解像度で表示する必要があります。可能であれば、何とかボックス内をドラッグして、それを完全に見ることができるのですか？

助けていただければ幸いです。

Answer 1

ドラッグ可能なペインを作成するには、2つの要素、つまりコンテナとして動作する外部divと 'キャンバス'として動作する内部divが必要です。外側のコンテナのスタイルはoverflow: hiddenに設定する必要があります。

<div id="drag-container"> 
    <div id="drag-canvas"><img></div> 
</div> 

次に、内側のキャンバスをドラッグ可能にする必要があります。内側のmouseDownで、変数dragging = trueを設定する関数を呼び出します。 mouseUpには、falseに設定する関数を呼び出します。 mouseDownにマウスの位置を保存して、内側のdivの上と下の位置を減算してオフセットとして使用することもできます。

次に、mouseMoveには、マウスの位置に基づいて内部キャンバスの上部および左の位置が設定されています。内部キャンバスがあなたがそれをつかんだポイントからドラッグするようにオフセットを追加することを忘れないでください。そうしないと、divの左上隅がマウスの位置にスナップされます。

JQuery UIのように、divに直接適用することができる「ドラッグ可能」メソッドを持つライブラリもあります。この処理を簡素化します。実際の鍵は、外側のコンテナに隠れたオーバーフローを設定することです。