最简单的拖拽

最新推荐文章于 2022-10-12 03:52:56 发布

温柔晨光

最新推荐文章于 2022-10-12 03:52:56 发布

阅读量69

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/moonla3/article/details/117736873

版权

js 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            background: red;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="box"></div>


    <script>
        const oBox = document.getElementById('box');

        function myDrag(ele, wrap) {
            let disL,
                disT;
            let drag = false;


            //鼠标按下的时候，先求出鼠标到盒子边框上的距离
            ele.onmousedown = function(e) {
                drag = true;
                disL = e.clientX - ele.offsetLeft;
                disT = e.clientY - ele.offsetTop;
            }
            document.onmousemove = function(e) {
                if (drag) {
                    ele.style.left = e.clientX - disL + 'px';
                    ele.style.top = e.clientY - disT + 'px';
                }
            }
            ele.onmouseup = function(e) {
                drag = false;
            }
        }

        myDrag(oBox, document);
    </script>

</body>

</html>

温柔晨光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最简单的拖拽

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>拖拽</title><style>#box{width:100px;height:100px;position:absolute;...
复制链接

扫一扫