原生JS实现拖拽基本原理

最新推荐文章于 2023-05-21 10:07:49 发布

Zhang190716

最新推荐文章于 2023-05-21 10:07:49 发布

阅读量177

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/Zhang190716/article/details/103236164

版权

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #drag_obj{
            width:100px;
            height:100px;
            background-color: black;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="drag_obj"></div>
    <script>
        var drag_obj = document.getElementById('drag_obj');
        drag_obj.onmousedown = function(e){
            var ev= e||event;
            var l = ev.clientX - drag_obj.offsetLeft;//鼠标x坐标位置距离拖拽对象左边的距离
            var t = ev.clientY -drag_obj.offsetTop;//鼠标Y坐标位置距离拖拽对象顶部的距离
            document.onmousemove = function(e){
                var ev= e||event;
                drag_obj.style.left = ev.clientX - l+"px"
                drag_obj.style.top = ev.clientY - t+"px"
            }；
            document.onmouseup=function(){
                document.onmousemove=document.onmouseup=null;
            }；
            return false；
        }
    </script>
</body>
</html>