鼠标按下就可以拖动元素,松开元素就会在那个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js鼠标移到</title>
</head>
<body>
<div id="dv" style="position:absolute;">
低调的跟着鼠标飘过~~
</div>
<div id="dv2" style="position:absolute;top:100px">
<img src="./document.png" alt="">
</div>
<script type="text/javascript">
sbiaomove('dv')
sbiaomove('dv2')
function sbiaomove(element) {
var dv = document.getElementById(element);
function Divflying() {
if (!dv) {
return;
}//鼠标在屏幕上面的位置
var intX = window.event.clientX;
var intY = window.event.clientY;
dv.style.left = intX + "px";
dv.style.top = intY + "px";
}
function downCl() {
document.onmousemove = Divflying
}
dv.addEventListener('mouseup', function () {
dv.removeEventListener('mousedown', downCl)
document.onmousemove = null
})//鼠标离开就解除绑定
dv
dv.addEventListener('mouseover', function () {
dv.addEventListener('mousedown', downCl)
})//鼠标一进入就增加事件
}
</script>
</body>
</html>