JS基础-拖拽

最新推荐文章于 2023-04-12 17:20:24 发布

linqunbin

最新推荐文章于 2023-04-12 17:20:24 发布

阅读量96

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/linqunbin/article/details/90732658

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
        #box2{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;
            left: 500px;
            top: 200px;
        }
    </style>
    <script>
        window.onload = function(event){
            /*
            拖拽box1元素
            -拖拽流程:
            1 当鼠标在被拖拽元素按下时,开始拖拽(onmousedown);
            2 当鼠标移动时,被拖拽元素跟随鼠标(onmousemove);
            3 当鼠标松开时,被拖拽元素固定在当前位置(onmouseup).
            */
            var box1 = document.getElementById('box1');
            var box2 = document.getElementById('box2');
            drag(box1);
            drag(box2);
        }

        /*
        提取一个专门用来做拖拽的函数
        参数:开启拖拽的元素
        */
        function drag(obj){
            // 为box1绑定鼠标按下事件
            obj.onmousedown = function (event) {
                // 不求div的偏移量也可以,但写了之后,鼠标点击被拖拽元素的位置就不会变了,会比较好一些.
                // 求div的偏移量 鼠标.clientX - 元素.offsetLeft
                // 求div的偏移量 鼠标.clientY - 元素.offsetTop
                var ol = event.clientX - obj.offsetLeft;
                var ot = event.clientY - obj.offsetTop;

                // 当鼠标移动时,被拖拽元素跟随鼠标移动onmousemove
                // 为document绑定一个onmousemove事件
                document.onmousemove = function (event) {
                    // 解决兼容性问题
                    event = event || window.event
                    var left = event.clientX - ol;
                    var top = event.clientY - ot;
                    // 修改box1的位置
                    obj.style.left = left + 'px';
                    obj.style.top = top + 'px';
                }
                // 当鼠标松开时,被拖拽元素固定在当前位置onmouseup
                // 这里最好不用box1,用document.onmouseup
                document.onmouseup = function () {
                    // 取消document.onmousemove事件
                    document.onmousemove = null;
                    // 取消document.onmouseup事件(一定要添加)
                    document.onmouseup = null;
                }
                /*
                    当我们拖拽一个网页中的内容时,游览器会默认去搜索引擎中搜索内容
                        此时会导致拖拽功能的异常,这个是游览器提供的默认行为
                        如果不希望发生这个行为,则可以通过return false来取消默认行为
                */
                return false;
            }
        }
    </script>
</head>
<body>
    <span>这是一个拖拽测试</span>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

linqunbin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础-拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录