HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .position move in container</title>

  <style>

    body { font-family: sans-serif; padding: 16px; }

    #stage {

      position: relative;

      width: 320px; height: 200px;

      border: 2px solid #64748b;

      background: #f1f5f9;

      overflow: hidden;

    }

    #box {

      position: absolute;

      left: 40px; top: 40px;

      width: 56px; height: 56px;

      background: #f59e0b; color: #fff;

      display: flex; align-items: center; justify-content: center;

      border-radius: 8px; cursor: move;

    }

    .hint { margin-top: 10px; color: #64748b; font-size: 14px; }

  </style>

</head>

<body>

  <div id="stage">

    <div id="box">Box</div>

  </div>

  <p class="hint">Arrow keys move the box inside #stage via .position() + .css().</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 pos = $box.position();

      if (e.key === "ArrowLeft")  pos.left -= step;

      if (e.key === "ArrowRight") pos.left += step;

      if (e.key === "ArrowUp")    pos.top  -= step;

      if (e.key === "ArrowDown")  pos.top  += step;

      if (/Arrow/.test(e.key)) {

        e.preventDefault();

        $box.css({ top: pos.top, left: pos.left });

      }

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .position() — move inside container (Try It)