The functionality for dragging elements is not functioning properly in JavaScript

Question

The functionality for dragging elements is not functioning properly in JavaScript

Here is the code I used in an attempt to make a div element draggable:

let div = document.querySelector('div')
div.onmousedown = function() {
  div.addEventListener('mousemove', move, true)
}
window.onmouseup = function() {
  window.removeEventListener('mousemove', move, true)
}

function move(e) {
  this.style.position = 'absolute'
  this.style.top = e.clientY + 'px'
  this.style.left = e.clientX + 'px'
}

div {
  background: red;
  width: 100px;
  height: 100px;
}

<div></div>

Unfortunately, the code does not work as expected and there seems to be an issue with the positioning when hovering over the div. It appears that there may be unintended side effects that are affecting the positioning. Upon reviewing the code, it doesn't seem like any mouseover-related actions were defined.

If anyone can provide insight into what might be causing this unexpected behavior and how to resolve it, I would greatly appreciate it!

Thank you for any assistance!

javascript html css

Answer 1

Answer №1

Make sure to remove the event listener from the specific div element, not from the window:

I have also implemented centering of the div while the user is dragging it, preventing the mouse from escaping the div.

let draggableDiv = document.querySelector('div');

function moveElement(e) {
  this.style.position = 'absolute';
  this.style.top = e.clientY - (this.offsetHeight / 2) + 'px';
  this.style.left = e.clientX - (this.offsetWidth / 2) + 'px';
}

draggableDiv.addEventListener('mousedown', function() {
  this.addEventListener('mousemove', moveElement, true);
});

window.addEventListener('mouseup', function() {
  draggableDiv.removeEventListener('mousemove', moveElement, true);
});

div {
  background: red;
  width: 100px;
  height: 100px;
}

<div></div>

Answer 2

Make sure to remove the event listener from the specific div element, not from the window:

I have also implemented centering of the div while the user is dragging it, preventing the mouse from escaping the div.

let draggableDiv = document.querySelector('div');

function moveElement(e) {
  this.style.position = 'absolute';
  this.style.top = e.clientY - (this.offsetHeight / 2) + 'px';
  this.style.left = e.clientX - (this.offsetWidth / 2) + 'px';
}

draggableDiv.addEventListener('mousedown', function() {
  this.addEventListener('mousemove', moveElement, true);
});

window.addEventListener('mouseup', function() {
  draggableDiv.removeEventListener('mousemove', moveElement, true);
});

div {
  background: red;
  width: 100px;
  height: 100px;
}

<div></div>

Answer 3

Answer №2

There were a couple of issues that needed addressing:

The event listener was being removed from the window instead of the div element.
It is important to take into account the offset values in order to accurately position the div when moving it.

let div = document.querySelector('div')
let offsetX = "";
let offsetY = "";

div.onmousedown = function(e) {
  var domRect = this.getBoundingClientRect();
  offsetX = e.clientX - domRect.left;
  offsetY = e.clientY - domRect.top;
  div.addEventListener('mousemove', move, true)
}

window.onmouseup = function() {
  div.removeEventListener('mousemove', move, true)
}

function move(e) {
  this.style.position = 'absolute'
  this.style.top = e.clientY - offsetY + 'px'
  this.style.left = e.clientX - offsetX + 'px'
}

#my-div {
  background: red;
  width: 100px;
  height: 100px;
}

<div id="my-div"></div>

Answer 4

There were a couple of issues that needed addressing:

The event listener was being removed from the window instead of the div element.
It is important to take into account the offset values in order to accurately position the div when moving it.

let div = document.querySelector('div')
let offsetX = "";
let offsetY = "";

div.onmousedown = function(e) {
  var domRect = this.getBoundingClientRect();
  offsetX = e.clientX - domRect.left;
  offsetY = e.clientY - domRect.top;
  div.addEventListener('mousemove', move, true)
}

window.onmouseup = function() {
  div.removeEventListener('mousemove', move, true)
}

function move(e) {
  this.style.position = 'absolute'
  this.style.top = e.clientY - offsetY + 'px'
  this.style.left = e.clientX - offsetX + 'px'
}

#my-div {
  background: red;
  width: 100px;
  height: 100px;
}

<div id="my-div"></div>

Answer 5

Answer №3

makeDraggable(document.getElementById("myelement"));

function makeDraggable(el) {
  var x1 = 0, x2 = 0, y1 = 0, y2 = 0;
  
  if (document.getElementById(el.id + "header")) {
    document.getElementById(el.id + "header").onmousedown = startDragging;
  } else {
    el.onmousedown = startDragging;
  }

  function startDragging(e) {
    e = e || window.event;
    e.preventDefault();
    
    x1 = e.clientX;
    y1 = e.clientY;
    
    document.onmouseup = stopDragging;
    document.onmousemove = moveElement;
  }

  function moveElement(e) {
    e = e || window.event;
    e.preventDefault();
    
    x2 = x1 - e.clientX;
    y2 = y1 - e.clientY;
    
    x1 = e.clientX;
    y1 = e.clientY;
    
    el.style.top = (el.offsetTop - y2) + "px";
    el.style.left = (el.offsetLeft - x2) + "px";
  }

  function stopDragging() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#myelement {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#myelementheader {
  height: 100px;
  width: 100px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

<h1>Resizable Element</h1>

<div id="myelement">
  <div id="myelementheader"></div>
</div>

Answer 6

makeDraggable(document.getElementById("myelement"));

function makeDraggable(el) {
  var x1 = 0, x2 = 0, y1 = 0, y2 = 0;
  
  if (document.getElementById(el.id + "header")) {
    document.getElementById(el.id + "header").onmousedown = startDragging;
  } else {
    el.onmousedown = startDragging;
  }

  function startDragging(e) {
    e = e || window.event;
    e.preventDefault();
    
    x1 = e.clientX;
    y1 = e.clientY;
    
    document.onmouseup = stopDragging;
    document.onmousemove = moveElement;
  }

  function moveElement(e) {
    e = e || window.event;
    e.preventDefault();
    
    x2 = x1 - e.clientX;
    y2 = y1 - e.clientY;
    
    x1 = e.clientX;
    y1 = e.clientY;
    
    el.style.top = (el.offsetTop - y2) + "px";
    el.style.left = (el.offsetLeft - x2) + "px";
  }

  function stopDragging() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#myelement {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#myelementheader {
  height: 100px;
  width: 100px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

<h1>Resizable Element</h1>

<div id="myelement">
  <div id="myelementheader"></div>
</div>

The functionality for dragging elements is not functioning properly in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Modify JSON date format to a shorter version using the first 2 letters of the month and the year

Can you combine multiple user validation rules with express-validator?

What methods do publications use to manage HTML5 banner advertisements?

Design a layout consisting of a grid with items that maintain a set maximum width while being evenly distributed across the entire width of the device

Transform JSON time data from Coordinated Universal Time (UTC) to Indian Standard

Execute tests on changing files using cypress.io

Eliminate repeated elements in a selection using an AngularJS custom directive

The CSS files undergo modifications when executing the command "npm run dev"

How to perfectly align squares in CSS Grid

Unable to retrieve post information from Angular using PHP

Ways to change the chart type in ApexCharts

Creating a stunning horizontal bar chart with the react-d3-components framework

Why does this asynchronous function initially return nothing, only to suddenly return all results on subsequent tries?

What is the proper way to mention JavaScript packages when including them as parameters in Angular elements within HTML?

"Learn how to update an existing table row and populate its cells with JSON data retrieved from a successful AJAX request without creating a

Unforeseen SyntaxError: Unexpected symbol detected

Having trouble accessing req.user on my Node.js server using Auth0 and Angular

Saving data values for utilization in jQuery

Issue with React Google Maps Api: Error occurs while trying to access undefined properties for reading 'emit'

The object's type remains a mystery