javascript - 使元素随着鼠标移动而移动
问题描述
我现在有这个漂亮的小东西。这部分是我正在寻找的。当您尝试运行代码时,按下图像并用鼠标移动它:
<!DOCTYPE html>
<html>
<style>
#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
</style>
<body>
<div id="mydiv">
<div id="mydivheader"><img src="https://res.cloudinary.com/piersolutions/image/upload/v1621772508/mpvovedzx30m3gknvmwi.jpg"></div>
</div>
<script>
//Make the DIV element draggagle:
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;
}
}
</script>
</body>
</html>
它工作正常,但我希望它基本上可以移动到我的鼠标移动的任何地方。所以如果我移动我的鼠标,它应该跟随我的鼠标。您可以在标题中看到一个示例www.poolhouse.co
(仅适用于桌面)。我将如何使用下面的代码执行此操作?可能吗?
解决方案
您必须更改mousedown
为mouseover
//Make the DIV element draggagle:
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").onmouseover = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmouseover = 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;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
<div id="mydiv">
<div id="mydivheader"><img src="https://res.cloudinary.com/piersolutions/image/upload/v1621772508/mpvovedzx30m3gknvmwi.jpg"></div>
</div>
推荐阅读
- ios - Ionic Capacitor 无法再生成可构建的 iOS 项目,CompileAssetCatalog 错误
- java - 从谷歌地图中的共享位置获取长/纬度到您的应用程序
- r - 在 tidyverse 中将列拆分为日期/时间
- python - 根据列的组合在数据框中创建唯一标识符,但仅适用于重复的行
- java - Gradle Java FX 应用程序构建失败:UnsupportedClassVersionError
- python - 在python中合并不同长度的数据框
- xcode - SwiftUI 中的自定义 Google 登录按钮
- python - 如何使用 Python 导航到网页并下载在线报告?
- reactjs - 在附加到反应挂钩 reactjs 和 socket.io 之前,消息会上下浮动
- java - java.lang.UnsatisfiedLinkError 在 teiid jboss 翻译器开发中从 FesApi 创建 EpcDocument 对象时出现异常