jquery - 画像のjQuery「ハンドツール」エミュレーション（正しい方向に向けてください）

Question

Google で検索しましたが、探しているものが見つかりません。これが何と呼ばれるか正確にはわからないので、説明するために最善を尽くします。さまざまな画像エディターで「ハンドツール」をエミュレートする方法を探しています。500x500 の div 内に大きな画像 (1024x1024 など) を配置したいと思います。次に、ユーザーは手のひらツールで画像を「つかみ」、その周りをスクロールできます (1 つの大きな画像がある Google マップを考えてみてください)。私を助けるチュートリアルやプラグインを知っている人はいますか。

Answer 1

使用できるヒント：

1. アウターDIVポートまたはビューポートにはposition: relative;、overflow: hidden;

2. 内側IMG（マウスでドラッグして移動したいもの）には、position: absolute;

3. 移動/パンニングロジックは次のようになります。

   • ユーザーがIMGでマウスを押したとき-移動が進行中であることを示すフラグを設定します

   • ユーザーがドキュメント上にマウスを移動すると、moving-flagが設定されている場合は、受け取ったイベントオブジェクトから取得したx座標とy座標に従って、IMGの位置を更新します（style.leftプロパティとstyle.topプロパティを変更します）。コールバックで

   • ユーザーがマウスボタンを押すか離したとき-moving-flagをfalseに設定します

これは非常にバグのあるフィドルです。最初に使用できます：http ：//jsfiddle.net/SPXmB/1/