jQuery - 要素をドラッグで動かす

公開日：2018-12-25 更新日：2019-05-14
[jQuery]

1. 概要

mousedown、mouseup、mousemove イベントを使用して、要素をドラッグで移動します。

mousedown、mouseup イベントで移動中かどうかの制御を行い、
mousemove イベントで、初回クリック時と現在の位置との差分により、新しい位置を算出して、移動させています。

また、マウスを素早く動かすと、カーソルがターゲットの要素からはずれて mousemove イベントが発生しなくなるため、親要素に対して、mousemove イベントを設定しています。

2. サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body style="padding:0px; margin:0px;">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <style>
    html, body { height:100%; }
    #root {
      position:relative; width:100%; height:100%; overflow:hidden;
    }
    #target {
      position:absolute; width:100px; height:100px; top:50px; left:50px;
      background-color:red; color:black;
    }
  </style>

  <div id="root">
    <div id="target">
      ドラッグして動かせます。
    </div>
  </div>
  
  <script>

    var _isMoving = false; //移動中かどうかのフラグ true:移動中 false:停止中
    var _clickX,  _clickY; //クリックされた位置
    var _position;         //クリックされた時の要素の位置

    //mousedownイベント
    $("#target").on("mousedown", function(e) {
      if (_isMoving) return; //移動中の場合は処理しない

      _isMoving = true; //移動中にする

      //クリックされた座標を保持します
      _clickX = e.screenX;
      _clickY = e.screenY;

      //クリックされた時の要素の座標を保持します
      _position = $("#target").position();
    });

    //mousemoveイベント
    $("#root").on("mousemove", function(e) {
      if (_isMoving == false) return; //移動中でない場合は処理しない

      //クリックされた時の要素の座標に、移動量を加算したものを、座標として設定します
      $("#target").css("left", (_position.left + e.screenX - _clickX) + "px");
      $("#target").css("top" , (_position.top  + e.screenY - _clickY) + "px");
    });

    //mouseupイベント
    $("#target").on("mouseup", function(e) {
      if (_isMoving == false) return; //移動中でない場合は処理しない

      _isMoving = false; //停止中にする
    });

  </script>
</body></html>

実行結果：画面



Tag

New Article