原生js实现div在窗口内移动

折纸成鸢。

于 2019-04-19 19:42:11 发布

阅读量1.2k

点赞数 2

分类专栏：前端 javascript

本文链接：https://blog.csdn.net/qq_26679989/article/details/89406896

版权

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

javascript

28 篇文章 1 订阅

订阅专栏

原生js实现div在窗口内移动

css样式

<style>
	*{margin:0;padding:0;}
	#div1{
			position: absolute;
			width: 490px;
			height: 40px;
			z-index: 10;
			background-color: aliceblue; 
			cursor: move;
	}
	#contents{
			position: absolute;
			width: 700px;
			height: 470px;
			top: 50%;
			left: 50%;
			margin-top: -235px;
			margin-left: -350px;
			display: none;
	}
</style>

html

<body>
	<div id="contents">
	<div id="div1"></div>
	</div>
</body>

js代码

<script>
	window.onload = function () {
			var Content = document.getElementById("contents");
            var Odiv = document.getElementById("div1");
            var disX = 0;
            var disY = 0;
            Odiv.onmousedown = function (ev) {
                //鼠标事件对象
                var oEvent = ev || event;
                disX = oEvent.clientX - Content.offsetLeft;
                disY = oEvent.clientY - Content.offsetTop;

                document.onmousemove = function (ev) {
                    //鼠标事件对象
                    var oEvent = ev || event;
                    var l = oEvent.clientX - disX;
                    var t = oEvent.clientY - disY;

                    if (l < 50) {
                        l = 0;
                    }
                    else if (l > document.documentElement.clientWidth - Content.offsetWidth) {
                        l = document.documentElement.clientWidth - Content.offsetWidth;
                    }
                    if (t < 50) {
                        t = 0;
                    }
                    else if (t > document.documentElement.clientHeight - Content.offsetHeight) {
                        t = document.documentElement.clientHeight - Content.offsetHeight;
                    }
                    Content.style.left = l+ "px";
                    Content.style.top = t + "px";
                   	Content.style.cursor = "move";
                   /**如果父盒子设置有marginTop和marginLeft则需要将其设置为0*/
                   Content.style.marginLeft = 0;
				   Content.style.marginTop =0;
                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
					Content.style.cursor = "auto";	
                }
                //阻止默认事件
                return false;

            }
                    
        }
</script>

折纸成鸢。

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现div在窗口内移动

原生js实现div在窗口内移动css样式<style> *{margin:0;padding:0;} #div1{width:200px;height:200px;position:absolute;left:500px;background:red;}</style>html<body> <div id="div1"></d...
复制链接

扫一扫