PointerLock example, but with a div instead of an HTML 5 shape

MDN Learn
1

Hi, hi.

I was reading the Pointer lock guide and stumbled into this example: https://mdn.github.io/dom-examples/pointer-lock/ and it’s exactly what I was looking for.

I need some help, though.
In the example, the draggable object is a shape built inside a canvas. I need to drag a simple div instead.

I’ve tried drag and drop API and pointer lock, though I’m never able to make the cursor disappear when the drag operation starts. Instead, in the example above, it vanishes without a problem.

What could I do? Thanks a lot in advance!

Here, a test: https://codepen.io/Dlofud/pen/KKyqYpz

2

Hello @Dlofud

i did not used this api before but the example show that

canvas.requestPointerLock = canvas.requestPointerLock ||
                            canvas.mozRequestPointerLock;

document.exitPointerLock = document.exitPointerLock ||
                           document.mozExitPointerLock;

but your code does comment that

/*box1.requestPointerLock = box1.requestPointerLock ||
  box1.mozRequestPointerLock;*/

and i do not understand what exactly you want to achive

3

Thanks for looking into it, I’ll try to explain it better!

In the example, there’s a red canvas, which you can drag around.

When you click on it, the mouse cursor vanishes and you only see the canvas.

I want to make something like that to happen when I drag a div.

I hope it’s easier to understand!

4

sorry for late replay

you need to but the div (let us call it movable object)you want to move inside the div you want the movable object to move inside it’s boundry or it will be moving around the whole document (if that what you want) also you need to have event listener that once that mouse get locked it move that render that movable object

this the whole js code from the page you share

// helper function

const RADIUS = 20;

function degToRad(degrees) {
  var result = Math.PI / 180 * degrees;
  return result;
}

// setup of the canvas

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var x = 50;
var y = 50;

function canvasDraw() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#f00";
  ctx.beginPath();
  ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
  ctx.fill();
}
canvasDraw();

// pointer lock object forking for cross browser

canvas.requestPointerLock = canvas.requestPointerLock ||
                            canvas.mozRequestPointerLock;

document.exitPointerLock = document.exitPointerLock ||
                           document.mozExitPointerLock;

canvas.onclick = function() {
  canvas.requestPointerLock();
};

// pointer lock event listeners

// Hook pointer lock state change events for different browsers
document.addEventListener('pointerlockchange', lockChangeAlert, false);
document.addEventListener('mozpointerlockchange', lockChangeAlert, false);

function lockChangeAlert() {
  if (document.pointerLockElement === canvas ||
      document.mozPointerLockElement === canvas) {
    console.log('The pointer lock status is now locked');
    document.addEventListener("mousemove", updatePosition, false);
  } else {
    console.log('The pointer lock status is now unlocked');  
    document.removeEventListener("mousemove", updatePosition, false);
  }
}

var tracker = document.getElementById('tracker');

var animation;
function updatePosition(e) {
  x += e.movementX;
  y += e.movementY;
  if (x > canvas.width + RADIUS) {
    x = -RADIUS;
  }
  if (y > canvas.height + RADIUS) {
    y = -RADIUS;
  }  
  if (x < -RADIUS) {
    x = canvas.width + RADIUS;
  }
  if (y < -RADIUS) {
    y = canvas.height + RADIUS;
  }
  tracker.textContent = "X position: " + x + ", Y position: " + y;

  if (!animation) {
    animation = requestAnimationFrame(function() {
      animation = null;
      canvasDraw();
    });
  }
}

read it carefully line by line and notice what each line do and you will get the pattern and if you had issue with any funtion you can search for it in https://developer.mozilla.org/en-US/

hope that help and have a nice day :slight_smile: