Moving the square using mousedown event on front end

user_12787469 0
Viewed 412

Practicing some front end stuff just by using addEventListener. What I am trying to achieve here is that : click the square and then hold the mouse while moving the square to another place on the page and stop moving by release the mouse. Something is not right as the square seems to move in one direction only. Need some help here.

#square_cursor {
  position: relative;
  left: 109px;
  top: 109px;
  height: 50px;
  width: 50px;
  background-color: rgb(219, 136, 136);
  border: 5px rgb(136, 219, 219) solid;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drag and Drop</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id='square_cursor'></div>
  <script>
    let mouse_over_detector = false; //move the mouse over WITHOUT clicking
    let mouse_click_detector = false; //clicking the mouse WITHOUT moveover
    let drag_detector = false; //move and holding the mouse together

    let window_click_detector = false;
    let window_motion_detector = false;

    let position_x = 0;
    let position_y = 0;

    let new_position_x = 0;
    let new_position_y = 0;

    window.addEventListener('mousedown', () => {
      window_click_detector = true;
    })

    window.addEventListener('mouseup', () => {
      window_click_detector = false;
      brick.style.backgroundColor = 'rgb(219, 136, 136)';
    })

    let brick = document.getElementById('square_cursor');

    //done
    brick.addEventListener('mousedown', (event) => {
      position_x = event.clientX;
      position_y = event.clientY;
      mouse_click_detector = true;
      brick.style.backgroundColor = 'yellow';
    })

    brick.addEventListener('mousemove', (event) => {
      if (mouse_click_detector === true) {
        new_position_x = event.clientX;
        new_position_y = event.clientY;
        dragAndDrop(position_x, position_y, event.offsetX, event.offsetY);

      }
    });

    brick.addEventListener('mouseout', () => {
      mouse_over_detector = false;
      mouse_click_detector = false;
    })

    brick.addEventListener('mouseup', () => {
      mouse_click_detector = false;
    })

    function dragAndDrop(a, b, c, d) {
      console.log('new x: ')
      console.log(a - c);
      console.log('new y: ')
      console.log(b - d);
      brick.style.left = a - c + 'px'
      brick.style.top = b - d + 'px';
    }
  </script>
</body>

</html>

dom-events css html javascript
2 Answers

Something like this..

//Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
 

#mydiv {
  
  position: absolute; /* NECESSARY */
  background-color: dodgerblue;
  border: 1px solid #d3d3d3;
  height: 20px;
  width: 20px;
}
 

<div id="mydiv">
  </div>

user_148743800

SOLVED IT THIS MORNING by using just addEventListener wooohoooo!

So the keys here are, first, being able to identify the DOM hierarchy and second, knowing what clientX does for the selected element. I am going to post my solution in snippet mode.

But I am still gonna give a vote to the 1st answer.

#square_cursor{
    position:absolute;
    left:109px;
    top:109px;
    height:50px;
    width:50px;
    background-color: rgb(219, 136, 136);
    border:5px rgb(136, 219, 219) solid;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drag and Drop</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id='square_cursor'></div>
  <script>
    let mouse_click_detector = false; //clicking the mouse WITHOUT moveover
    let window_click_detector = false;

    let position_x = 0;
    let position_y = 0;
    let click_position_x = 0;
    let click_position_y = 0;

    let brick = document.getElementById('square_cursor');

    brick.addEventListener('mousedown', () => {
      mouse_click_detector = true
    })

    window.addEventListener('mouseup', () => {
      mouse_click_detector = false;
      window_click_detector = false;
      brick.style.backgroundColor = 'rgb(219, 136, 136)';
    })

    window.addEventListener('mousedown', (event) => {
      if (mouse_click_detector === true) {
        window_click_detector = true;
        brick.style.backgroundColor = 'yellow';
        click_position_x = event.offsetX;
        click_position_y = event.offsetY;
      }
    })

    window.addEventListener('mousemove', (event) => {
      if (mouse_click_detector === true) {
        position_x = event.clientX;
        position_y = event.clientY;
        brick.style.left = position_x - click_position_x + 'px';
        brick.style.top = position_y - click_position_y + 'px';
      }
    })
  </script>
</body>

</html>

"The most personal is the most creative" --- Martin Scorsese

user_127874690
Related