JavaScript ---鼠标拖拽元素问题总结

最新推荐文章于 2022-12-06 15:01:47 发布

阿清呀.

最新推荐文章于 2022-12-06 15:01:47 发布

阅读量245

点赞数 1

分类专栏： javascript学习路程文章标签： javascript

本文链接：https://blog.csdn.net/wzg0817/article/details/105747183

版权

javascript学习路程专栏收录该内容

48 篇文章 0 订阅

订阅专栏

大致分为三个步骤：

鼠标摁下 onmousedown
鼠标移动 onmousemove
鼠标抬起 onmouseup

注意的一点是 onmousemove事件和onmouseup事件是在onmousedown事件里面的

代码如下（不支持IE8及以下浏览器）：代码一

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
        
        #box1 {
            width: 100px;
            height: 100px;
            background-color: #bbffaa;
            position: absolute;
            margin-left: 100px;
            z-index: 33;
        }
        
        #box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 300px;
            left: 300px;
        }
    </style>
    <script>
        window.onload = function() {

            var box1 = document.getElementById("box1");
            dary(box1);
            dary(box2);
        };

        function dary(obj) {
            // 为box设置鼠标按下事件  
            obj.onmousedown = function(event) {

                // 解决 event兼容性
                event = event || window.event;

                //元素上偏移量 = 鼠标.clientY-元素。offsetTop +元素的上外边距 
                //元素左偏移量 = 鼠标.clientX-元素。offsetleft +元素的下外边距
                var ot = event.pageY - obj.offsetTop + parseInt(getComputedStyle(obj, null)["margin-top"]);
                var ol = event.pageX - obj.offsetLeft + parseInt(getComputedStyle(obj, null)["margin-left"]);

                // 设置鼠标在box上的移动事件
                document.onmousemove = function(event) {
                    event = event || window.event;
                    // 获取鼠标的位置坐标
                    var top = event.pageY - ot;
                    var left = event.pageX - ol;
                    // 设置元素的位置
                    obj.style.top = top + "px";
                    obj.style.left = left + "px";
                };
                // 设置鼠标在box上的抬起事件
                document.onmouseup = function() {
                    // 当鼠标抬起时，取消onmousemove事件
                    document.onmousemove = null;
                    // 当鼠标抬起时，取消onmouseup事件
                    document.onmouseup = null;

                };

                /*
                        当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎汇总的搜索内容，
                        此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
                        如果不希望发生这个行为 ，则可以通过return false来取消默认行为
    
                        该方法解决对IE8及以下浏览器 不适用， 其他都好使
                    */
                return false;
            }
        };
    </script>
</head>

<body>
    <p>asdfasd</p>
    <div id="box1"></div>
    <div id="box2"></div>

</body>

</html>

愿你的坚持终有收获。

个人博客网站没事可以来逛逛https://aqingya.cn

阿清呀.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript ---鼠标拖拽元素问题总结

大致分为三个步骤：鼠标摁下 onmousedown鼠标移动 onmousemove鼠标抬起 onmouseup注意的一点是 onmousemove事件和onmouseup事件是在onmousedown事件里面的代码如下（不支持IE8及以下浏览器）：代码一<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫

专栏目录