I am trying to create a simple drag behavior for elements using mouse events and absolute positioning.

I have a mousemove event listener for the container div which changes the position of boxRef with the help of clientX and clientY properties of the mouse event.

It works fine when the mouse move is slow, but when it's fast, it just stops, How can I handle this so that the element does not stop no matter the speed of the mouse move?

const shadowStytle = "10px 10px 12px #888888";

const appRef = document.getElementById('app');
appRef.innerHTML = `<div class="box" id="box"></div>`;

const boxRef = document.getElementById("box");
const xOffset = boxRef.clientWidth / 2;
const yOffset = boxRef.clientHeight / 2;

let selectionLocked = false;

function lockSelection() {
  selectionLocked = true;
  boxRef.style.boxShadow = shadowStytle;
  boxRef.style.backgroundColor = "red";
}

function unlockSelection() {
  selectionLocked = false;
  boxRef.style.boxShadow = "none";
  boxRef.style.backgroundColor = "black";
}

unlockSelection();

boxRef.addEventListener("mousedown", (arg) => {
  lockSelection();
});

boxRef.addEventListener("mouseup", (arg) => {
  unlockSelection();
});

boxRef.addEventListener("mouseleave", (arg) => {
  if (selectionLocked) {
    selectionLocked = false;
    boxRef.style.boxShadow = "none";
  }
});

appRef.addEventListener("mousemove", (arg) => {
  if (selectionLocked) {
    boxRef.style.left = `${arg.clientX - xOffset}px`;
    boxRef.style.top = `${arg.clientY - yOffset}px`;
  }
});

.box {
  position: absolute;
  border: 1px solid black;
  padding: 25px;
  width: 10%;
}

<div id="app"></div>

I am trying to create a simple drag behavior for elements using mouse events and absolute positioning.

I have a mousemove event listener for the container div which changes the position of boxRef with the help of clientX and clientY properties of the mouse event.

It works fine when the mouse move is slow, but when it's fast, it just stops, How can I handle this so that the element does not stop no matter the speed of the mouse move?

const shadowStytle = "10px 10px 12px #888888";

const appRef = document.getElementById('app');
appRef.innerHTML = `<div class="box" id="box"></div>`;

const boxRef = document.getElementById("box");
const xOffset = boxRef.clientWidth / 2;
const yOffset = boxRef.clientHeight / 2;

let selectionLocked = false;

function lockSelection() {
  selectionLocked = true;
  boxRef.style.boxShadow = shadowStytle;
  boxRef.style.backgroundColor = "red";
}

function unlockSelection() {
  selectionLocked = false;
  boxRef.style.boxShadow = "none";
  boxRef.style.backgroundColor = "black";
}

unlockSelection();

boxRef.addEventListener("mousedown", (arg) => {
  lockSelection();
});

boxRef.addEventListener("mouseup", (arg) => {
  unlockSelection();
});

boxRef.addEventListener("mouseleave", (arg) => {
  if (selectionLocked) {
    selectionLocked = false;
    boxRef.style.boxShadow = "none";
  }
});

appRef.addEventListener("mousemove", (arg) => {
  if (selectionLocked) {
    boxRef.style.left = `${arg.clientX - xOffset}px`;
    boxRef.style.top = `${arg.clientY - yOffset}px`;
  }
});

.box {
  position: absolute;
  border: 1px solid black;
  padding: 25px;
  width: 10%;
}

<div id="app"></div>

Stackblitz

• javascript
• mouseevent

• You can set the mousemove event listener function on window instead of appRef. – Máté Safranka Commented May 3, 2018 at 13:17
• Tried that, still the same behavior – cyberpirate92 Commented May 3, 2018 at 13:19
• OMG! Okay I need to sleep I guess, My bad – cyberpirate92 Commented May 3, 2018 at 13:22
• I added mouseleave method for some other purpose and removing that works, silly of me – cyberpirate92 Commented May 3, 2018 at 13:23

1 Answer 1

You do not need the mouseleave on the element. Your problem is that that mouseleave fires on the element and it terminates your drag. Instead take advantage of the event bubbling and add your handler to a sufficiently large parent container or the window itself. Fire up mouseup on the window/container if and only if it has been previoulsy activated by mousedown. If you want you can also remove and re attach the handler on window on mousedown on the element if you want to save some putation. But I left it:

https://jsfiddle/ibowankenobi/gd1e93a3/1/

const shadowStytle = "10px 10px 12px #888888";

const appRef = document.getElementById('app');
appRef.innerHTML = `<div class="box" id="box"></div>`;

const boxRef = document.getElementById("box");
const xOffset = boxRef.clientWidth / 2;
const yOffset = boxRef.clientHeight / 2;

let selectionLocked = false;

function lockSelection() {
  selectionLocked = true;
  boxRef.style.boxShadow = shadowStytle;
  boxRef.style.backgroundColor = "red";
}

function unlockSelection() {
  selectionLocked = false;
  boxRef.style.boxShadow = "none";
  boxRef.style.backgroundColor = "black";
}

unlockSelection();

boxRef.addEventListener("mousedown", (arg) => {
  lockSelection();
});

window.addEventListener("mouseup", (arg) => {
  selectionLocked && unlockSelection();
});

boxRef.addEventListener("mouseleave", (arg) => {
  /*if (selectionLocked) {
    selectionLocked = false;
    boxRef.style.boxShadow = "none";
  }*/
});

window.addEventListener("mousemove", (arg) => {
  if (selectionLocked) {
    boxRef.style.left = `${arg.clientX - xOffset}px`;
    boxRef.style.top = `${arg.clientY - yOffset}px`;
  }
});