CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

jQueryを使ってコンテナdiv内の画像をドラッグ＆パンで移動させる方法

マウスのmousedown・mousemove・mouseupという3つのイベントを組み合わせることで、画像を自由に移動させ、ドラッグ（パン）操作を実現できます。特別なプラグインを使わずとも、jQueryの基本機能だけで簡単に実装できるのが魅力です。

動作の仕組み

ドラッグ操作は、以下の流れで実現されます。

  • mousedown（押下時）：ドラッグの開始点となるマウスカーソルの座標を記録します。
  • mousemove（移動中）：カーソルの移動量を計算し、CSSのtransformプロパティを使って画像をリアルタイムに移動させます。
  • mouseup（離した時）：ドラッグを終了し、mousemoveイベントの監視を解除します。

サンプルコード

以下は、jQueryを使ってコンテナdiv内の画像をドラッグで移動させる具体的な例です。

<!DOCTYPE html>
<html>
<head>
<style>
#parent{
    position: absolute;
    margin: 20px;
    width: 200px;
    height: 200px;
    border-radius: 25px;
    background-color: khaki;
}
#mover {
    position: relative;
    margin: 10px;
}
</style>
</head>
<body>
<div id=parent>
<img id="mover" src="https://images.unsplash.com/photo-1613333238609-
ef9218f3ddbd?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixlib=rb1.2.1&q=80&w=100" />
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
let ele = {startPositionX:0,startPositionY:0};
let disp = {x:0,y:0};
$('#parent').on("mousedown",function(e){
    let container = $(this);
    ele.startPositionX=e.pageX-disp.x;
    ele.startPositionY=e.pageY-disp.y;
    $(document).on("mousemove",function(e){
        disp.x=e.pageX-ele.startPositionX;
        disp.y=e.pageY-ele.startPositionY;
        $('#mover').css('transform','scale('+1.0+') translate('+disp.x+'px, '+disp.y+'px)');
    });
});
$(document).on("mouseup",function(){
    $(this).off("mousemove");
});
</script>
</body>
</html>

コードのポイント

  • #parentに対してmousedownイベントを登録し、コンテナ上でマウスが押されたことを検知します。
  • e.pageXから現在のオフセット（disp）を差し引くことで、ドラッグ開始時の基準座標を求めています。これにより、途中からドラッグしても画像がジャンプしません。
  • documentレベルでmousemoveを監視することで、カーソルがコンテナ外に出てもスムーズに追従できます。
  • mouseup時にoff("mousemove")でイベントを解除し、ドラッグを終了させます。

実行結果

このコードをブラウザで実行すると、次のような画面が表示されます。

jQueryを使ってコンテナdiv内の画像をドラッグ＆パンで移動させる方法

ドラッグ後：

jQueryを使ってコンテナdiv内の画像をドラッグ＆パンで移動させる方法

このように、mousedown・mousemove・mouseupの3つのイベントを適切に制御するだけで、jQueryのみで直感的な画像ドラッグ（パン）機能を実装できます。地図アプリや画像ビューアなど、さまざまな場面に応用できるテクニックなので、ぜひ参考にしてみてください。

  1. C++とOpenCVを使って画像にテキストを描画する方法【putText関数の使い方】

    OpenCVでは、putText()関数を使うことで、画像の上にテキストを描画できます。この関数は<imgproc.hpp>ヘッダー内で定義されています。画像にテキストを描画するには、まず画像を読み込むための行列（Mat）を宣言する必要があります。本記事のサンプルでは、既存の画像ファイルを読み込む代わりに、白一色で塗りつぶした空の行列を作成し、その上にテキストを描画します。テキストを表示する際は、以下の要素を指定する必要があります。テキストの描画開始位置（座標）フォントの種類フォントの色フォントの太さ（線の太さ）putText()関数の基本構文putText(image, Text

  2. 画像や動画でGoogle検索する方法｜リバース画像検索を徹底解説

    Googleは世界で最も広く利用されている検索エンジンです。キーワードを入力するだけで、関連する画像や情報を簡単に見つけられます。しかし、「手持ちの画像や動画から検索したい」と思ったことはありませんか?実は、キーワードを使わずに、画像や動画から逆引き検索(リバース検索)を行うことができます。この記事では、画像や動画を使ってGoogleで手軽に検索する方法を4つご紹介します。 画像や動画でGoogle検索する4つの方法 画像や動画でGoogle検索をする主な目的は、その画像や動画の出所(元ネタ)を特定することです。デスクトップやスマートフォンに保存している画像について、「この画像はどこから来たの