JS实现拖动事件，滚轴滑动与拖动同步事件

哎呦喂这

已于 2022-11-25 16:39:51 修改

阅读量776

点赞数

分类专栏： js 文章标签： javascript css

于 2022-11-25 16:31:11 首次发布

本文链接：https://blog.csdn.net/F14867/article/details/128040111

版权

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