What could be causing my document element to suddenly shift to the side of the page with just a slight movement?

Question

What could be causing my document element to suddenly shift to the side of the page with just a slight movement?

I'm facing an issue with dragging an element just a bit on a mousedown event to reveal a new item underneath. However, whenever I try to move it, the element jumps all the way to the right side of the window instead of where I intended it to go. I have experimented with changing positions from 'relative' to 'absolute', setting fixed x and y positions, and making them relative to the mouse event, but the problem persists.

It seems like there's something fundamental that I am missing here. In my background, I've heavily relied on vue.js to handle DOM manipulation, as I don't have much experience in this area. This challenge arose in a Vue project initially, leading me to believe it was a Vue-related issue, which was later proven not to be the case.

document.getElementById("red").addEventListener("mousedown", mouseDown);
function mouseDown(e) {

  const el = e.target;
  // const x = e.pageX;
  // const y = e.pageY;

  const rect = el.getBoundingClientRect();
  const x = rect.left + 20;
  const y = rect.top + 20;

  el.style.left = `${x}px`
  el.style.top = `${y}px`

  const newrect = el.getBoundingClientRect();

  document.getElementById("from").innerHTML = "drag from:      " + rect.left + ", " + rect.top;
  document.getElementById("to").innerHTML = "try to drag to: " + x + ", " + y;
  document.getElementById("result").innerHTML = "dragged to:     " + + newrect.left + ", " + newrect.top;
}

.box {
  position:relative;
  margin: auto;
  border: 3px solid #73AD21;
  width: 200px;
  height: 250px;
}
.button {
  position:relative;
  background-color: red;
  color: white;
  padding: 10px 20px;
  text-align: center;
  width: 100px;
  font-size: 16px;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag Drop Test</title>
</head>
   
<body>
<div id="app" align="center" class="box">
<button id="red" class="button" >Red</button>
<p id="from"></p>
<p id="to"></p>
<p id="result"></p>
</div>
</body>
</html>

javascript html css

Answer 1

Answer №1

The button is being positioned to the far right due to the code snippet below:

const el = e.target; //el refers to the button with id "red" that you clicked on

const rect = el.getBoundingClientRect(); //this function returns the size of the button and its current position relative to the viewport (not the parent element)

const x = rect.left + 20;
const y = rect.top + 20;

el.style.left = `${x}px`; //moves the button by 20px along the x-coordinate.
el.style.top = `${y}px`; //moves the button by 20px along the y-coordinate.

Since both the button and the box are set to have a relative position in your CSS, when you move the button 20px from the left and top, it moves all the way to the extreme right. To keep the button inside the box, you need to calculate the positions relative to the parent element (the box) rather than the entire viewport. Additionally, the position of the button should be set to absolute since the position of the box is relative.

Below is the modified code that ensures the button stays draggable inside the box only. I hope this solution addresses your issue.

// JavaScript code
const button = document.getElementById("red");
const box = document.getElementById("app");

const boxWidth = box.offsetWidth + 3;
const boxHeight = box.offsetHeight + 3; // including border

const buttonWidth = button.offsetWidth;
const buttonHeight = button.offsetHeight;

let dragStartX, dragStartY; // drag start positions
let buttonX, buttonY;

let isDragging; // check if currently dragging or not
let marginReached = false; // flag to determine if button reaches the box's margin

button.addEventListener("mousedown", handleMouseDown);
button.addEventListener("mousemove", handleMouseMove);
button.addEventListener("mouseup", handleMouseUp);

// handle mousedown events
function handleMouseDown(e) {
    const boxRect = box.getBoundingClientRect();
    const buttonRect = button.getBoundingClientRect();
    const LEFT = buttonRect.left - boxRect.left;
    const TOP = buttonRect.top - boxRect.top;
    isDragging = true; // set dragging to true
    dragStartX = e.clientX; // mouse pointer position on the x-axis
    dragStartY = e.clientY; // mouse pointer position on the y-axis
    buttonX = LEFT; // position of the button on the x-axis
    buttonY = TOP; // position of the button on the y-axis
}

// handle mousemove events
function handleMouseMove(e) {
    const mouseX = e.clientX; // current mouse position on the x-axis
    const mouseY = e.clientY; // current mouse position on the y-axis

    const moveFromLeft = mouseX - dragStartX + buttonX;
    const moveFromTop = mouseY - dragStartY + buttonY;

    // prevent the button from moving past the margins of the box
    if (
        moveFromLeft >= boxWidth - buttonWidth ||
        moveFromTop >= boxHeight - buttonHeight ||
        moveFromLeft <= 0 ||
        moveFromTop <= 0
    ) {
        marginReached = true;
    } else {
        marginReached = false;
    }

    if (isDragging && !marginReached) {
        button.style.left = `${moveFromLeft}px`;
        button.style.top = `${moveFromTop}px`;
    }
}

// handle mouseup events
function handleMouseUp(e) {
    isDragging = false; // set dragging to false on mouse button release
}

.box {
    position: relative;
    margin: auto;
    border: 3px solid #73AD21;
    width: 200px;
    height: 250px;
}
.button {
    position: absolute;
    left: 25%;
    background-color: red;
    color: white;
    padding: 10px 20px;
    text-align: center;
    width: 100px;
    font-size: 16px;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag Drop Test</title>
  </head>
   
  <body>
    <div id="app" align="center" class="box">
      <button id="red" class="button" >Red</button>
      <p id="from"></p>
      <p id="to"></p>
      <p id="result"></p>
    </div>
  </body>
</html>

Answer 2

The button is being positioned to the far right due to the code snippet below:

const el = e.target; //el refers to the button with id "red" that you clicked on

const rect = el.getBoundingClientRect(); //this function returns the size of the button and its current position relative to the viewport (not the parent element)

const x = rect.left + 20;
const y = rect.top + 20;

el.style.left = `${x}px`; //moves the button by 20px along the x-coordinate.
el.style.top = `${y}px`; //moves the button by 20px along the y-coordinate.

Since both the button and the box are set to have a relative position in your CSS, when you move the button 20px from the left and top, it moves all the way to the extreme right. To keep the button inside the box, you need to calculate the positions relative to the parent element (the box) rather than the entire viewport. Additionally, the position of the button should be set to absolute since the position of the box is relative.

Below is the modified code that ensures the button stays draggable inside the box only. I hope this solution addresses your issue.

// JavaScript code
const button = document.getElementById("red");
const box = document.getElementById("app");

const boxWidth = box.offsetWidth + 3;
const boxHeight = box.offsetHeight + 3; // including border

const buttonWidth = button.offsetWidth;
const buttonHeight = button.offsetHeight;

let dragStartX, dragStartY; // drag start positions
let buttonX, buttonY;

let isDragging; // check if currently dragging or not
let marginReached = false; // flag to determine if button reaches the box's margin

button.addEventListener("mousedown", handleMouseDown);
button.addEventListener("mousemove", handleMouseMove);
button.addEventListener("mouseup", handleMouseUp);

// handle mousedown events
function handleMouseDown(e) {
    const boxRect = box.getBoundingClientRect();
    const buttonRect = button.getBoundingClientRect();
    const LEFT = buttonRect.left - boxRect.left;
    const TOP = buttonRect.top - boxRect.top;
    isDragging = true; // set dragging to true
    dragStartX = e.clientX; // mouse pointer position on the x-axis
    dragStartY = e.clientY; // mouse pointer position on the y-axis
    buttonX = LEFT; // position of the button on the x-axis
    buttonY = TOP; // position of the button on the y-axis
}

// handle mousemove events
function handleMouseMove(e) {
    const mouseX = e.clientX; // current mouse position on the x-axis
    const mouseY = e.clientY; // current mouse position on the y-axis

    const moveFromLeft = mouseX - dragStartX + buttonX;
    const moveFromTop = mouseY - dragStartY + buttonY;

    // prevent the button from moving past the margins of the box
    if (
        moveFromLeft >= boxWidth - buttonWidth ||
        moveFromTop >= boxHeight - buttonHeight ||
        moveFromLeft <= 0 ||
        moveFromTop <= 0
    ) {
        marginReached = true;
    } else {
        marginReached = false;
    }

    if (isDragging && !marginReached) {
        button.style.left = `${moveFromLeft}px`;
        button.style.top = `${moveFromTop}px`;
    }
}

// handle mouseup events
function handleMouseUp(e) {
    isDragging = false; // set dragging to false on mouse button release
}

.box {
    position: relative;
    margin: auto;
    border: 3px solid #73AD21;
    width: 200px;
    height: 250px;
}
.button {
    position: absolute;
    left: 25%;
    background-color: red;
    color: white;
    padding: 10px 20px;
    text-align: center;
    width: 100px;
    font-size: 16px;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag Drop Test</title>
  </head>
   
  <body>
    <div id="app" align="center" class="box">
      <button id="red" class="button" >Red</button>
      <p id="from"></p>
      <p id="to"></p>
      <p id="result"></p>
    </div>
  </body>
</html>

Answer 3

Answer №2

Breaking down @Mol nAK's response to fit my unique needs, I am looking for the following solution:

  const redButton = document.getElementById("red");
  redButton.addEventListener("mousedown", handleMouseDown);

  function handleMouseDown(event) {
    const parentRectangle = redButton.parentElement.getBoundingClientRect();
    const buttonRectangle = redButton.getBoundingClientRect();

    const distanceFromLeft = buttonRectangle.left - parentRectangle.left;
    const distanceFromTop =  buttonRectangle.top - parentRectangle.top; 
  
    redButton.style.left = `${distanceFromLeft}px`
    redButton.style.top = `${distanceFromTop}px`
  }

Answer 4

Breaking down @Mol nAK's response to fit my unique needs, I am looking for the following solution:

  const redButton = document.getElementById("red");
  redButton.addEventListener("mousedown", handleMouseDown);

  function handleMouseDown(event) {
    const parentRectangle = redButton.parentElement.getBoundingClientRect();
    const buttonRectangle = redButton.getBoundingClientRect();

    const distanceFromLeft = buttonRectangle.left - parentRectangle.left;
    const distanceFromTop =  buttonRectangle.top - parentRectangle.top; 
  
    redButton.style.left = `${distanceFromLeft}px`
    redButton.style.top = `${distanceFromTop}px`
  }

What could be causing my document element to suddenly shift to the side of the page with just a slight movement?

Answer №1

Answer №2

Similar questions

Adding dropdown values to text area

Determining the checkbox value in a Django template based on views

Utilizing the `theme` property in makeStyles with Material-UI

Styling elements conditionally with AngularJS-controlled CSS

CSS3's auto property for margin

How can I resize an element using jQuery resizable and then revert it back to its original size with a button click?

What is the process for adding a button and redirecting to a different view in MVC4?

Personalize Autocomplete CSS based on the TextField input in React Material UI when a value is present

ES6: utilizing properties and methods of a subclass that inherit from the superclass

Nashorn encountered an issue: java.lang.NoSuchMethodException was raised due to the absence of the renderServer function

NEXT.JS - LocalStorage unexpectedly resets data to its initial state instead of persisting changes after the page is refreshed

What is the best way to design a navigation bar for a one-page application using Vue?

At times, MomentJS may miscalculate and add an incorrect number of hours

Incorporate JSON data to display SVG images

Why can't I access my PHP variable in an external JavaScript file?

Discovering and revising an item, delivering the complete object, in a recursive manner

Should I include JSX or JS when exporting ReactJS components as node modules to npm?

Filtering a list with Vue.js using an array of checkboxes

Combine the given name with the initial of their surname

The method .makePerspective() in THREE.Matrix4 has been updated with a new signature. Make sure to refer to the documentation for more information