试图使div在被拖动后指向某个方向

Question

客户端应该能够用鼠标拖动<div>，在释放左键单击后，它需要从页面中心向这个方向移动。换句话说，客户端应该能够yeet<div>。

这是我迄今为止的代码：

//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
var xcen = window.innerWidth / 2;
var ycen = window.innerHeight / 2;
if (document.getElementById(elmnt.id)) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id).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;
KickElement();
}
function KickElement(e) {
e = e || window.event;
e.preventDefault();
//if (parseFloat(elmnt.style.left) > window.innerWidth * 0.35) {
//angle = Math.atan2(e.clientY, e.clientX) * Math.PI / 180, // 30 degrees
speed = 0.01,
//deltaX = Math.cos(angle) * speed,
//deltaY = Math.sin(angle) * speed;
distanceX = (parseFloat(elmnt.style.left) - xcen) * speed;
distanceY = (parseFloat(elmnt.style.top) - ycen) * speed;
setInterval(function () {
elmnt.style.top = (elmnt.offsetTop += distanceY) + 'px';
elmnt.style.left = (elmnt.offsetLeft += distanceX) + 'px';
}, 1);
//}
}
}
document.getElementById("mydiv").style.top = "30%";
var meh = document.getElementsByClassName("bothrn");
for (var i = 0; i < meh.length; i++)
meh[i].style.left = "35%";

.bothrn{
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
min-width: 30%;
min-height: 60%;
cursor: move;
border-radius: 4vw;
}

<h1>Draggable DIV Element</h1>
<p>Click and hold the mouse button down while moving the DIV element</p>
<div id="mydiv" class="bothrn">
<div>Click here to move</div>
</div>

问题是，可拖动的<div>通常不会沿着它被拖动的方向移动。此外，有时甚至会沿着x或y轴的另一个方向移动。我仍在学习javascript和所有的想法，所以任何帮助都将不胜感激。

Answer 1

您可以在释放鼠标后获得(pos1, pos2)向量的单位向量，然后将该向量的x和y分量添加到必须移动的<div>中。

这里有一个简单的例子：

const mousevx = document.querySelector('#mousevx')
const mousevy = document.querySelector('#mousevy')
const box = document.getElementById('box')
box.friction = 0.2
box.speed = 1
dragElement(document.getElementById('box'))
function dragElement(elmnt) {
let pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0
elmnt.onmousedown = dragMouseDown
function dragMouseDown(e) {
e = e || window.event
e.preventDefault()
pos3 = e.clientX
pos4 = e.clientY
document.onmouseup = closeDragElement
document.onmousemove = elementDrag
pos1 = 0
pos2 = 0
}
function elementDrag(e) {
e = e || window.event
e.preventDefault()
pos1 = pos3 - e.clientX
pos2 = pos4 - e.clientY
pos3 = e.clientX
pos4 = e.clientY
elmnt.style.left = elmnt.offsetLeft - pos1 + 'px'
elmnt.style.top = elmnt.offsetTop - pos2 + 'px'
}
function closeDragElement(e) {
document.onmouseup = null
document.onmousemove = null
// Get the unit vector
const mag = Math.sqrt(pos1 ** 2 + pos2 ** 2)
const uvx = pos1 / mag
const uvy = pos2 / mag
// Initial speed
box.speed = mag / 5
freeMove(uvx, uvy)
}
function freeMove(uvx, uvy) {
const shiftX = uvx * box.speed
const shiftY = uvy * box.speed
mousevx.textContent = 'xV = ' + shiftX.toFixed(2)
mousevy.textContent = 'yV = ' + shiftY.toFixed(2)
elmnt.style.top = elmnt.offsetTop - shiftY + 'px'
elmnt.style.left = elmnt.offsetLeft - shiftX + 'px'
// Remove this to make it slide forever
box.speed -= box.friction
if (box.speed > 0) {
requestAnimationFrame(() => freeMove(uvx, uvy))
} else {
mousevx.textContent = 'xV = 0.00'
mousevy.textContent = 'yV = 0.00'
}
}
}

.bothrn {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
min-width: 30%;
min-height: 20%;
cursor: move;
border-radius: 4vw;
}

<h2 id="mousevx"></h2>
<h2 id="mousevy"></h2>
<div id="box" class="bothrn">
<div>Click here to move</div>
</div>

尝试使用box.friction = 0.2和box.speed = mag / 5进行实验，以获得所需的行为。