Breaking News: Grepper is joining You.com. Read the official announcement!

Drag’n’Drop algorithm

Taiwo Fatokun answered on December 7, 2022 Popularity 2/10 Helpfulness 1/10

answer Drag’n’Drop algorithm

Drag’n’Drop algorithm

Comment

ball.onmousedown = function(event) {
  // (1) prepare to moving: make absolute and on top by z-index
  ball.style.position = 'absolute';
  ball.style.zIndex = 1000;

  // move it out of any current parents directly into body
  // to make it positioned relative to the body
  document.body.append(ball);

  // centers the ball at (pageX, pageY) coordinates
  function moveAt(pageX, pageY) {
    ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
    ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
  }

  // move our absolutely positioned ball under the pointer
  moveAt(event.pageX, event.pageY);

  function onMouseMove(event) {
    moveAt(event.pageX, event.pageY);
  }

  // (2) move the ball on mousemove
  document.addEventListener('mousemove', onMouseMove);

  // (3) drop the ball, remove unneeded handlers
  ball.onmouseup = function() {
    document.removeEventListener('mousemove', onMouseMove);
    ball.onmouseup = null;
  };

};

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: algorithm javascript

Link to this answer
Share Copy Link

Contributed on Dec 07 2022

Taiwo Fatokun

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

Drag’n’Drop algorithm

Contents

More Related Answers

Drag’n’Drop algorithm

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.