JS实现拖拽

最新推荐文章于 2024-07-20 23:54:17 发布

坤坤多吃点儿。

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量53

点赞数

分类专栏： Javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_51614469/article/details/124985403

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

知识点： DOM获取元素+event(事件对象)+鼠标事件+事件对象属性+document.documentElement的clientHeight和clientWidth

html部分

		<div id="box"></div>

css部分

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

JS部分

		let box = document.getElementById('box');
        box.onmousedown = function(evt){
        	//事件对象 兼容IE
            let e = evt || window.event; 
            let dis_x = e.offsetX; 
            let dis_y = e.offsetY;
            document.onmousemove = function(evt){
                let e = evt || window.event;
                let left = e.pageX - dis_x;
                let top = e.pageY - dis_y;
                //设置左右边界
                if(left >= document.documentElement.clientWidth - box.clientWidth){
                    left = document.documentElement.clientWidth - box.clientWidth
                }else if(left <= 0){
                    left = 0
                }
                //设置上下边界
                if(top >= document.documentElement.clientHeight - box.clientHeight){
                    top = document.documentElement.clientHeight - box.clientHeight
                }else if(top <= 0){
                    top = 0
                }
                box.style.left = left + 'px';
                box.style.top = top + 'px';
            }
            box.onmouseup = function(){
            	//取消鼠标移动事件
                document.onmousemove = null
            }
        }