首页 > 其他分享> > 元素的拖拽效果（鼠标移动加监听事件）

元素的拖拽效果（鼠标移动加监听事件）

2019-09-01 21:00:23 作者：互联网

首先创建一个盒子

.box{
            width:100px;height:100px;
            background: red;
            position: absolute;left:0;top:0;
        }

<body>
    <div class="box"></div>
</body>

接下来是js代码部分

<script>
    var obox = document.querySelector(".box");
    var clientW = document.documentElement.clientWidth;
    var clientH = document.documentElement.clientHeight;
    var w = obox.offsetWidth;
    var h = obox.offsetHeight;

    // 行为过程：按下之后，移动，再抬起
    obox.addEventListener("mousedown",function(eve){
        // 获取按下的坐标，在按下的事件对象身上
        var e1 = eve || window.event;
        // 为了防止移动过快，鼠标在某一瞬间离开元素，移动事件加给页面
        document.addEventListener("mousemove",move)
        // 因为移动事件在抬起的时候，被删除，所以提前起名
        function move(eve){
            var e = eve || window.event;
            // 计算元素要移动的真正的距离：为鼠标相对于页面的坐标减去按下时相对于元素的坐标
            var l = e.pageX - e1.offsetX;
            var t = e.pageY - e1.offsetY;
            // 边界限定
            if(t < 0){
                t = 0
            }
            if(l < 0){
                l = 0
            }
            if(l > clientW - w){
                l = clientW - w;
            }
            if(t > clientH - h){
                t = clientH - h;
            }

            // 设置位置
            obox.style.left = l + "px"
            obox.style.top = t + "px"
        }
        // 抬起时，删除移动，删除抬起
        document.addEventListener("mouseup",up)
        function up(){
            document.removeEventListener("mousemove",move)
            document.removeEventListener("mouseup",up)
        }
    })

</script>

标签：移动,鼠标,up,eve,拖拽,var,obox,document,监听
来源： https://blog.csdn.net/weixin_43951248/article/details/100187727