随鼠标拖拽demo（完整代码）

最新推荐文章于 2024-05-07 06:02:05 发布

就像风1样

最新推荐文章于 2024-05-07 06:02:05 发布

阅读量849

点赞数

分类专栏： JavaScript 文章标签： js 拖拽

本文链接：https://blog.csdn.net/qq_42221334/article/details/100115339

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        body{  
            margin:0;  
            position: relative;  
        }  
        img{  
            position:absolute;  
        }  
    </style>  
</head>  
<body>  
<h3>鼠标拖拽小飞机</h3>  
<img id="p3" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=7790568,3102770366&fm=26&gp=0.jpg" alt=""/>  
<script>  
    p3.ondragstart=function(e){  
        console.log('事件源p3开始拖动');  
        //记录刚一拖动时，鼠标在飞机上的偏移量  
        offsetX= e.offsetX;  
        offsetY= e.offsetY;  
    }  
    p3.ondrag=function(e){  
        console.log('事件源p3拖动中');  
        var x= e.pageX;  
        var y= e.pageY;  
        console.log(x+'-'+y);  
        //drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0  
        if(x==0 && y==0){  
            return; //不处理拖动最后一刻X和Y都为0的情形  
        }  
        x-=offsetX;  
        y-=offsetY;  
        p3.style.left=x+'px';  
        p3.style.top=y+'px';  
    }  
    p3.ondragend=function(){  
        console.log('源对象p3拖动结束');  
    }  
</script>  
</body>  
</html>

就像风1样

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
随鼠标拖拽demo（完整代码）

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin:0; ...
复制链接

扫一扫