拖拽事件一

最新推荐文章于 2022-03-26 15:57:05 发布

407指导员

最新推荐文章于 2022-03-26 15:57:05 发布

阅读量765

点赞数 1

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109685669

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

拖拽事件一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽练习</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 100px;
            top: 200px;
        }
    </style>

    <script>
        window.onload = function () {
            /**
             * 拖拽box1元素
             *      -拖拽流程
             *          1.当鼠标在被拖拽元素按下时开始拖拽onmousedown
             *          2.当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
             *           3.当鼠标松开时，拖拽元素固定在当前位置onmouseup
             */
            var box1 = document.getElementById("box1");
            box1.onmousedown = function () {
                /*为document绑定onmousemove事件，如果给box1绑定，就无法向上移动，
                向上移动就出盒子了*/
                document.onmousemove = function (event) {
                    event = event || window.event;
                    //当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
                    var left = event.clientX;
                    var top = event.clientY;
                    //修改滚动条位置
                    box1.style.left = left + "px";
                    box1.style.top = top + "px";
                };

                //绑定鼠标松开事件，还是要给document绑定，如果给box1绑定
                //box1被box2盖住，如果要在此处放下，box1和box2是兄弟，无法冒泡
                //就无法松开,但是完全被盖住也无法再次拖动
                document.onmouseup = function () {
                    //将事件设置为空，取消onmousemove事件。
                    document.onmousemove = null;
                    //将事件设置为空，取消onmouseup事件。
                    document.onmouseup = null;  
                };

            };


        };
    </script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>