JS——拖拽盒子

最新推荐文章于 2022-11-08 09:32:06 发布

lazyzj

最新推荐文章于 2022-11-08 09:32:06 发布

阅读量158

点赞数

分类专栏：案例文章标签： js dom html

本文链接：https://blog.csdn.net/qq_35219361/article/details/106910586

版权

案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 180px;
            background-color: #ccc;
            position: absolute;
            top: 100px;
            left: 200px;
        }

        .top {
            height: 30px;
            text-align: center;
            font: 400 15px/30px "simsun";
            background-color: pink;
            cursor: move;
        }
    </style>
</head>
<body>
    <!-- 1、opacity是全部元素变透明，rgba只是背景色变透明

        2、先是注册鼠标按下的事件，此时就需要记录鼠标在盒子中的坐标

        3、再在鼠标按下事件中注册鼠标移动事件，此时鼠标的坐标是不断变化的，盒子的坐标就是鼠标的坐标减去鼠标在盒子的坐标

        4、top.onmousemove = function (ev) {}，top也可以换成document，主要考虑的是鼠标移动的太快出了盒子，改为document可以继续维持这个事件

        5、在top.onmousemove中必须取消文本被选中，不然拖拽的时候，如果选中了文字，会出现bug，选中的文字会首先被拖走，影响效果 -->
<div class="box">
    <div class="top">点击此处拖拽盒子</div>
</div>
<script>
    var box = document.getElementsByTagName("div")[0];
    var top = box.children[0];
    //点击盒子 然后拖拽
    //鼠标左键点击事件 鼠标移动事件
    top.addEventListener('mousedown',function (ev) {
        ev = ev || window.event;
        //1、鼠标的坐标
        var pageX = ev.pageX || scroll().left + ev.clientX;
        var pageY = ev.pageY || scroll().top + ev.clientY;
        //2、鼠标在盒子中的坐标
        var x = pageX - box.offsetLeft;
        var y = pageY - box.offsetTop;
        top.onmousemove = function (ev) {
            //3、进入onmousemove事件，鼠标左边不断更新
            var pageX = ev.pageX || scroll().left + ev.clientX;
            var pageY = ev.pageY || scroll().top + ev.clientY;
            ev = ev || window.event;
            box.style.left = pageX - x + "px";
            box.style.top = pageY - y + "px";
            box.style.opacity = 0.4;
            //取消文本被选中
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        }
    }) 

    //解绑
    top.onmouseup = function () {
        top.onmousemove = null;
        box.style.opacity = 1;
    }

    function scroll() {
        return {
            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
        };
    }
</script>
</body>
</html>

lazyzj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS——拖拽盒子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .box { width: 200px;
复制链接

扫一扫