HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.which</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    #drag-box {
      width: 160px; height: 80px; background: #6366f1; color: #fff;
      display: flex; align-items: center; justify-content: center;
      border-radius: 8px; cursor: grab; user-select: none;
      transition: transform 0.1s, box-shadow 0.1s;
    }
    #drag-box.dragging {
      background: #4f46e5; transform: scale(1.05);
      box-shadow: 0 8px 24px rgba(99,102,241,0.4); cursor: grabbing;
    }
    #out { margin-top: 12px; color: #4338ca; font-size: 14px; max-width: 360px; line-height: 1.5; }
  </style>
</head>
<body>
  <div id="drag-box">Press me</div>
  <div id="out">Left-click to add .dragging. Right-click or middle-click is ignored.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#drag-box").on("mousedown", function(event) {
      if (event.which !== 1) {
        $("#out").text("Ignored: button " + event.which + " (need 1 = left).");
        return;
      }
      $(this).addClass("dragging");
      $("#out").text("Left button (which=1): .dragging added until mouseup.");
      $(document).one("mouseup", function() {
        $("#drag-box").removeClass("dragging");
        $("#out").text("mouseup anywhere — .dragging removed.");
      });
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery mousedown event — event.which left button (Try It)