JS DOM操作实现拖动效果

JS拖动效果实现

最新推荐文章于 2022-10-13 10:38:16 发布

原创最新推荐文章于 2022-10-13 10:38:16 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #js

本文详细介绍了如何使用JSDOM操作实现元素的拖动效果，包括监听mousedown、mouseup、mousemove事件，以及处理鼠标与元素相对位置，防止拖动文字Bug和窗口失去焦点等问题。

JS DOM操作实现拖动效果

实现思路
首先画个绝对定位的div
监听mousedown mouseup mousemove
定义一个变量来标记是否按下
在Move中判断如果按下，则将鼠标位置赋值给div
按下时记录鼠标与div的相对位置，移动时减去这段距离
在move时阻止默认行为，防止拖动文字有Bug
监听blur事件，防止窗口失去焦点导致bug

DOM

<style>
        #demo {
            width: 300px;
            height: 300px;
            background: red;
            position: absolute;
        }
    </style>
    <div id="demo">拖动</div>

JavaSprit

  <script>                                     
        let demo = document.querySelector('#demo')//待拖拽元素
        let canMove = false //拖拽状态
        let x = 0, y = 0 //鼠标位置
        //监听按下鼠标事件
        demo.onmousedown = function (e) {
            x = e.pageX - demo.offsetLeft
            y = e.pageY - demo.offsetTop
            canMove = true //激活拖拽状态
        }
        //监听右击鼠标事件
        demo.oncontextmenu = function (e) {
            e.preventDefault()//阻止默认行为
        }
      	//监听鼠标抬起事件
        window.onmouseup = function () {
            canMove = false//关闭拖拽状态
        }
       
    </script>

由于当实际操作时，窗口失去焦点会造成位置bug，所以需要监听blur事件来解决。
代码如下：

 	window.onblur = function () {//窗口失去焦点事件
            canMove = false//关闭拖拽状态
        }

通过监听mousemove标移动事件来阻止浏览器默认行为（让div中的文字不能被拖走），同时为了不让div拖到窗口外造成bug，所以要对它规定一个范围。
代码如下：

  //监听鼠标移动事件
   window.onmousemove = function (e) {
            e.preventDefault();//阻止默认行为(字不能拖走)
            if (canMove) {//对范围判断
                let left = e.pageX - x
                let top = e.pageY - y

                if (left < 0) left = 0 //当距离左边小于0时 让它为0
                if (top < 0) top = 0 //当距离上边小于0时 让它为0
        	 //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
                let maxLeft = window.innerWidth - demo.offsetWidth
			//下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
                let maxTop = window.innerHeight - demo.offsetHeight 
                
                if (left > maxLeft) left = maxLeft
                if (top > maxTop) top = maxTop


                demo.style.left = left + 'px'
                demo.style.top = top + 'px'

            }
        }