js事件：拖拽原理

最新推荐文章于 2021-06-20 15:53:24 发布

beibei_niao

最新推荐文章于 2021-06-20 15:53:24 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/beibei_niao/article/details/103646198

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #div{
            width:100px;
            height:100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="div" style="left:0;top:0" onmousedown="myDrag()"></div>
    <script>
        var div = document.getElementById("div");
        function myDrag(){
            var downEvent = window.event || arguments[0];
            // console.log(downEvent.clientX);
            // console.log(downEvent.clientY);
            // console.log(downEvent.offsetX);
            // console.log(downEvent.offsetY);
            document.onmousemove = function(moveEvent){
                /*console.log(moveEvent.clientX)  //37
                console.log(moveEvent.clientY)  //31
                console.log(moveEvent.offsetX)  //37
                console.log(moveEvent.offsetY)  //31*/
                div.style.left = parseInt(moveEvent.clientX-downEvent.offsetX)+10+"px";
                div.style.top = parseInt(moveEvent.clientY-downEvent.offsetY)+10+"px";
            }
            document.onmouseup=function () {
                document.onmousemove = null;
            }
        }
    </script>
</body>
</html>

beibei_niao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件：拖拽原理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽</title> <style> #div{ width:100px; heigh...
复制链接

扫一扫