Jquery多个div相同的类，只拖动"this“div

<div class="drag">Div 1</div>
<div class="drag">Div 2</div>
<div class="drag">Div 3</div>

$(document).ready(function() {
  var dragging = false;
  var dragElement;

  $(".drag").mousedown(function(e) {
    dragging = true;
    dragElement = $(this);
    var position = dragElement.position();
    var offsetX = e.pageX - position.left;
    var offsetY = e.pageY - position.top;
    dragElement.css("position", "absolute");
    dragElement.css("left", position.left + "px");
    dragElement.css("top", position.top + "px");
    dragElement.css("margin", "0");
    dragElement.css("z-index", "9999");
    dragElement.css("opacity", "0.8");
    dragElement.css("cursor", "move");
    dragElement.css("pointer-events", "none");
    dragElement.css("user-select", "none");

    $(document).mousemove(function(e) {
      if (dragging) {
        dragElement.css("left", (e.pageX - offsetX) + "px");
        dragElement.css("top", (e.pageY - offsetY) + "px");
      }
    });

    $(document).mouseup(function() {
      if (dragging) {
        dragging = false;
        dragElement.css("opacity", "1");
        dragElement.css("cursor", "auto");
        dragElement.css("pointer-events", "auto");
        dragElement.css("user-select", "auto");
      }
    });
  });
});