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

Struggling to concentrate on the branding

A guide on converting array values to objects in AngularJS HTML

I am facing difficulty in incorporating an IP address or URL within an IFRAME in my Cordova Android application

Why is the `node-config` configuration undefined within a TypeScript Jest environment?

Tips for utilizing ng-repeat with a function that generates a fresh object?

Looping through JSON keys using ng-repeat in AngularJS

Consistentize Column Titles in Uploaded Excel Spreadsheet

Troubleshooting Issues with Loading Styles and JavaScript for Wordpress Plugin in Admin Area

Meteor is only returning a portion of the values from the child array

Wrap text elegantly around your images with Flex Mobile

The footer should always be anchored at the bottom of the webpage, maintaining a consistent position regardless of any changes to the browser's

Securing page access with a straightforward password protection using Flask

Creating a User-friendly Layout for Admin Pages in Next.js Version 13

The image loading and completion count function in JavaScript experiences sluggish performance on mobile devices

Steps to create a fixed pattern background image with a customizable background color based on the content within a div element

Enhance data granularity in Jquery Flot by zooming in as the user interacts

Eliminate any additional spacing or padding surrounding the text input field

Different types of video formats used for html5 video players

Using HTML and CSS to create nested divs floating to the left while also incorporating a

Order the results by a predicate chosen by the user and a predefined secondary attribute