获取鼠标位置及手写一个拖拽效果

最新推荐文章于 2022-08-25 09:37:49 发布

是欢欢啊

最新推荐文章于 2022-08-25 09:37:49 发布

阅读量78

点赞数

分类专栏： JS demo JS相关

本文链接：https://blog.csdn.net/bznhlhh/article/details/115579924

版权

JS相关同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

JS demo

28 篇文章 0 订阅

订阅专栏

<!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>
<style>
    body {
        height: 10000px;
    }
    .outer {
        position: fixed;
        left: 30%;
        top: 100px;
        width: 600px;
        height: 300px;
        background: skyblue;
    }
    .inner {
        width: 300px;
        height: 150px;
        background: red;
        margin: 80px auto;
    }
    .cur {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background: pink;
    }
</style>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>

    <div class="cur"></div>
    
</body>
<script>
    var inner = document.querySelector(".inner");
    document.onmousemove = function(event){
        var e = event || window.event;
        //screenX与screenY 是以电脑左上角为原点的，与网页位置无关;
        inner.innerHTML = "screenX:" + e.screenX + "screenY:" + e.screenY + "<br/>";

        //pageX与pageY 以网页主题部分左上角为原点;
        inner.innerHTML += "pageX:" + e.pageX +"pageY:" + e.pageY + "<br/>";

        //clientX与clientY 以可视区域为准
        inner.innerHTML += "clientX:" + e.clientX +"clientY:" + e.clientY + "<br/>";

        //获取数据类似于pageX与pageY,但是获取数据零点，会随着元素的子元素受到影响;
        inner.innerHTML += "offsetX:" + e.offsetX +"offsetY:" + e.offsetY + "<br/>";
    }

	//拖拽效果
    var cur = document.querySelector(".cur");
    cur.onmousedown = function(event){
        var e = event || window.event;
        var startX = e.offsetX;
        var startY = e.offsetY;
        console.log(startX,startY);
        document.onmousemove = function(event1){
            var e1 = event1 || window.event;
            cur.style.left = e1.clientX - startX + 'px';
            cur.style.top = e1.clientY - startY + 'px';
        }
    }

    cur.onmouseup = function(){
        document.onmousemove = null;
    }
</script>
</html>