JS DOM操作实现拖动效果

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'

            }
        }