Animating element to mouse cursor

Question

I have to move an element that I create onmousedown to the direction of the cursor onmouseup and animate the whole thing.

/*
function to spawn the ball
@param {event} event: onclick event
*/

var isDown = false;
var isDrag = false;

/*
function to get the position of the cursor on mouse down
@param {mousedown} event
*/
document.body.onmousedown = function (mousedown) {
  downX = mousedown.offsetX;
  downY = mousedown.offsetY;
  isDraggring = true;

  /*
  function to check if the user is dragging or clicking
  */
  document.body.onmousemove = function () {
    if (isDraggring) isDrag = true;

    /*
    function to detect the the mouse up event
    @param {mouseup} event
    */
    document.body.onmouseup = function (mouseup) {
      if (isDrag) {
        var ball = document.createElement("p");
        ball.innerHTML = "ball";
        document.body.append(ball);
        ball.style.position = "absolute";
        ball.style.left = downX - ball.offsetWidth / 2 + "px";
        ball.style.top = downY - ball.offsetHeight / 2 + "px";
      }
    };
  };
};

If the positions are at the same height and there is no angle it would just be: ball.style.left/top=mouseup.offsetX/Y but since most of the times there is event a slight angle I don't know how to make the "ball" move to that direction. Also the ball should not stop once it reaches the cursor. Any help?

user_8104022 · Answer

I've take the simplest approach, just save the mouse-up event coordinates, and then take the ball there.

If you need to continue this animation: you already got the mouse-down and mouse-up events coordinates, you can calculate the slope between those points, and you'll know the direction you want to proceed to.

/*
function to spawn the ball
@param {event} event: onclick event
*/

var isDown = false;
var isDrag = false;

/*
function to get the position of the cursor on mouse down
@param {mousedown} event
*/
document.body.onmousedown = function (mousedown) {
  downX = mousedown.offsetX;
  downY = mousedown.offsetY;
  isDraggring = true;

  /*
  function to check if the user is dragging or clicking
  */
  document.body.onmousemove = function () {
    if (isDraggring) isDrag = true;

    /*
    function to detect the the mouse up event
    @param {mouseup} event
    */
    document.body.onmouseup = function (mouseup) {
      if (isDrag) {
        var ball = document.createElement("p");
        ball.className = "ball";
        ball.innerHTML = "ball";
        document.body.append(ball);
        ball.style.position = "absolute";
        ball.style.left = downX - ball.offsetWidth / 2 + "px";
        ball.style.top = downY - ball.offsetHeight / 2 + "px";
        
        setTimeout(()=>{
          ball.style.left = mouseup.clientX + "px";
          ball.style.top = mouseup.clientY + "px";
        }, 500);
      }
    };
  };
};

body{
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.ball{
  transition: 0.5s;
}

Animating element to mouse cursor

1 Answers