HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery .offset move box</title>
  <style>
    body { font-family: sans-serif; padding: 16px; min-height: 320px; }
    #box {
      width: 64px; height: 64px; background: #0ea5e9; color: #fff;
      display: flex; align-items: center; justify-content: center;
      border-radius: 8px; position: absolute; left: 80px; top: 80px;
      user-select: none;
    }
    .hint { margin-top: 100px; color: #64748b; font-size: 14px; }
  </style>
</head>
<body>
  <div id="box">Move</div>
  <p class="hint">Use arrow keys to move the box (10px steps via .offset()).</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var step = 10;
    $(document).on("keydown", function(e) {
      var $box = $("#box");
      var o = $box.offset();
      if (e.key === "ArrowLeft")  o.left -= step;
      if (e.key === "ArrowRight") o.left += step;
      if (e.key === "ArrowUp")    o.top  -= step;
      if (e.key === "ArrowDown")  o.top  += step;
      if (/Arrow/.test(e.key)) {
        e.preventDefault();
        $box.offset(o);
      }
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .offset() — move box with arrow keys (Try It)