javascript 为什么当我稍微移动doc元素时，它会跳到页面的一边？

5jvtdoz2 于 2023-04-04 发布在 Java

关注(0)|答案(2)|浏览(109)

我试图在鼠标按下事件中拖动一个元素，这样它就会显示一个将在下面绘制的新项目。但是当我尝试移动时，它会一直跳到窗口的右侧。我如何使它移动到我想要的位置？我试过将位置从“相对”更改为“绝对”，我试过将新位置设置为固定的x和y，并与鼠标事件相关;它们都给予相同的结果。
这里我的基本理解有问题。作为背景，我一直在使用vue.js，以避免自己过多地参与dom操作（因为我不是太有经验！），并在一个vue项目中遇到了这个问题。最初我认为这是Vue的问题，但我现在已经证明不是。

document.getElementById("red").addEventListener("mousedown", mouseDown);
      function mouseDown(e) {

        const el = e.target;
        // const x = e.pageX;
        // const y = e.pageY;
     
        const rect = el.getBoundingClientRect();
        const x = rect.left + 20;
        const y = rect.top + 20;

        el.style.left = `${x}px`
        el.style.top = `${y}px`

        const newrect = el.getBoundingClientRect();

        document.getElementById("from").innerHTML = "drag from:      " + rect.left + ", " + rect.top;
        document.getElementById("to").innerHTML = "try to drag to: " + x + ", " + y;
        document.getElementById("result").innerHTML = "dragged to:     " + + newrect.left + ", " + newrect.top;
      }

.box {
    position:relative;
    margin: auto;
    border: 3px solid #73AD21;
    width: 200px;
    height: 250px;
    }
.button {
    position:relative;
    background-color: red;
    color: white;
    padding: 10px 20px;
    text-align: center;
    width: 100px;
    font-size: 16px;
    cursor: pointer;
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag Drop Test</title>
  </head>
   
  <body>
    <div id="app" align="center" class="box">
      <button id="red" class="button" >Red</button>
      <p id="from"></p>
      <p id="to"></p>
      <p id="result"></p>
    </div>
  </body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/75917651/why-does-my-doc-element-jump-to-the-side-of-the-page-when-i-move-it-a-little

2条答案

按热度按时间

i2loujxw1#

按钮移到了最右边，因为在你的代码中：

const el = e.target; //el is the button with id "red you click on

const rect = el.getBoundingClientRect(); //this returns the size of the button and its current position relative to the viewport(not the parent element)

const x = rect.left + 20;
const y = rect.top + 20;

el.style.left = `${x}px`//moves the button by 20px via x co-ordinate.
el.style.top = `${y}px //moves the button by 20px via y co-oridnate.

因为在CSS中你已经把button和box都设置成了相对的，所以当你从左上方按下button 20px的时候，因为你没有考虑button的父元素的尺寸，在这个例子中就是box，button移动到最右边。如果你想让button保持在box里面，然后你必须得到按钮相对于父元素的位置，而不是整个视口，按钮的位置应该是绝对的，因为你已经使盒子的位置是相对的。
这是我的代码来实现我认为你想要的，一个可拖动的按钮内框只。希望这有帮助。
x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-04-04

agxfikkp2#

简化@Mol nAK对我的特定要求的回答，我只需要以下内容：

const button = document.getElementById("red");
  button.addEventListener("mousedown", mouseDown);

  function mouseDown(e) {
    const parentRect = button.parentElement.getBoundingClientRect();
    const buttonRect = button.getBoundingClientRect();

    const moveFromLeft = buttonRect.left - parentRect.left;
    const moveFromTop =  buttonRect.top - parentRect.top; 
  
    button.style.left = `${moveFromLeft}px`
    button.style.top = `${moveFromTop}px`
  }

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 为什么当我稍微移动doc元素时，它会跳到页面的一边？

2条答案

相关问题

热门标签

最新问答