HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document mouseup</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: 420px; line-height: 1.5; }
  </style>
</head>
<body>
  <div id="drag-box">Press me</div>
  <div id="out">Left mousedown adds .dragging. Release anywhere to remove it.</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) return;
      var $box = $(this);
      $box.addClass("dragging");
      $("#out").text("Dragging… release anywhere on the page.");
      $(document).one("mouseup", function() {
        $box.removeClass("dragging");
        $("#out").text("document mouseup — .dragging removed.");
      });
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery mouseup event — document mouseup drag end (Try It)