我试图在鼠标下拉事件上拖动一个元素，以便它显示一个将在下面绘制的新项目。但是当我尝试移动时，它会一直跳到窗口的右侧。我怎么让它移动到我想要的地方?我尝试过将位置从"相对"更改为"绝对"，我尝试过将新位置设置为固定的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>按钮移动到最右边，因为在你的代码中:
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中你让按钮和盒子都是相对的，一旦你从左到上推按钮20px，因为你没有考虑到按钮的父元素的尺寸，在这种情况下是盒子，按钮移动到最右边。如果你想让按钮保持在框内，那么你必须获得按钮相对于父元素的位置，而不是整个视口的位置，而且按钮的位置应该是绝对的，因为你已经使框的位置是相对的。
这是我的代码，以实现我假设你想要的，一个可拖动的按钮框内只有。希望对你有帮助。
const button = document.getElementById("red");
const box = document.getElementById("app");
const boxWidth = box.offsetWidth+3;
const boxHeight = box.offsetHeight+3;//including border
const buttonWidth = button.offsetWidth;
const buttonHeight = button.offsetHeight;
let dragStartX, dragStartY; //drag start posiitions
let buttonX, buttonY;
let isDragging; //to check if currently dragging or not
let marginReached=false; //to check wether the button reaches the margin of the box or not
button.addEventListener("mousedown", handleMouseDown);
button.addEventListener("mousemove", handleMouseMove);
button.addEventListener("mouseup", handleMouseUp);
//handles mousedown events
function handleMouseDown(e){
const boxRect = box.getBoundingClientRect();
const buttonRect = button.getBoundingClientRect();
const LEFT = buttonRect.left - boxRect.left;
const TOP = buttonRect.top - boxRect.top;
isDragging = true;//set dragging to true
dragStartX = e.clientX; //mouse pointer position on x axis
dragStartY = e.clientY; //mouse pointer position on y axis
buttonX = LEFT;//position of button on x axis
buttonY = TOP;//position of button on y axis
}
//handles mouse move events
function handleMouseMove(e){
const mouseX = e.clientX;//current mouse position on x axis
const mouseY = e.clientY;// current mouse position on y axis
const moveFromLeft = mouseX-dragStartX+buttonX;
const moveFromTop = mouseY-dragStartY+buttonY;
//checks wether the button reaches the margin of the box and prevents it from going any further
if(moveFromLeft>=(boxWidth-buttonWidth) ||
moveFromTop>=(boxHeight-buttonHeight)||
moveFromLeft<=0||
moveFromTop<=0
){
marginReached = true
}else{
marginReached = false
}
if(isDragging && !marginReached){
button.style.left = `${moveFromLeft}px`
button.style.top = `${moveFromTop}px`
}
}
//handles mouse up events
function handleMouseUp(e){
isDragging = false; //set dragging to false on mouse button release
}.box {
position:relative;
margin: auto;
border: 3px solid #73AD21;
width: 200px;
height: 250px;
}
.button {
position:absolute;
left:25%;
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>简化@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`
}