个人中心
gpt4 book ai didi

javascript - 在前端使用 mousedown 事件移动方 block

转载 作者：行者123 更新时间：2023-12-04 08:06:52 25 4
gpt4 key购买 nike

使用 addEventListener 练习一些前端的东西.我在这里想要实现的是:单击方块然后按住鼠标同时将方块移动到页面上的另一个位置，然后通过释放鼠标停止移动。有什么不对的，因为正方形似乎只向一个方向移动。这里需要一些帮助。

#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>

最佳答案

像这样的东西..

//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>

关于javascript - 在前端使用 mousedown 事件移动方 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66181654/

25 4 0
文章推荐： python - 如何从 beautifulsoup4 中的标签获取命名空间信息？
文章推荐： julia - 为什么向我的 Julia 函数添​​加类型会导致 MethodError？
文章推荐： javascript - 在 JavaScript 中提交时如何更改 URL 中的参数
文章推荐： c - 在 C 中递归文件时如何打印整个路径名和单个路径名？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com