JS实现拖动事件,鼠标滚轴滑动进行内容移动,同时移动与鼠标的拖动同步,例如阴阳师京都商业街部分。
鼠标实现拖动事件
例子
在页面中可对图片实现拖动到任意位置。
html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽</title>
</head>
<body>
<img id="angle" src="../img/拖1.gif" alt="">
<script src="拖拽.js"></script>
</body>
</html>
JS页面
const angle=document.querySelector("#angle")
angle.onmousedown=function(event) {
let shiftX=event.clientX-angle.getBoundingClientRect().left;
let shiftY=event.clientY-angle.getBoundingClientRect().top;
angle.style.position='absolute';
angle.style.zIdex=1000;
document.body.append(angle);
moveAt(event.pageX,event.pageY);
//移动现在位于坐标(pageX,pageY)上的图片
//将初始的偏移考虑在内
function moveAt(pageX,pageY) {
angle.style.left=pageX-shiftX+'px';
angle.style.top=pageY-shiftY+'px';
}
function onMouseMove(event