JS——拖拽盒子

Posted 站错队了同志

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS——拖拽盒子相关的知识，希望对你有一定的参考价值。

注意事项：

1、opacity是全部元素变透明，rgba只是背景色变透明

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

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

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

5、在top.onmousemove中必须取消文本被选中，不然拖拽的时候，如果选中了文字，会出现bug，选中的文字会首先被拖走，影响效果

<!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>
<div class="box">
    <div class="top">点击此处拖拽盒子</div>
</div>
<script>
    var box = document.getElementsByTagName("div")[0];
    var top = box.children[0];
    //点击盒子 然后拖拽
    //鼠标左键点击事件 鼠标移动事件
    top.onmousedown = 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>

以上是关于JS——拖拽盒子的主要内容，如果未能解决你的问题，请参考以下文章

JS——拖拽盒子

关于js在一个固定的盒子里面拖拽的问题（包含临界值）

盒子拖拽效果，原生js实现

JS之拖拽案例

24.盒子拖拽功能实现

Sortable.js 拖拽导致移动端不能点击问题