js div move

最新推荐文章于 2021-08-16 13:43:45 发布

xss23into

最新推荐文章于 2021-08-16 13:43:45 发布

阅读量173

点赞数

分类专栏： javascript 文章标签： JavaScript XHTML HTML ViewUI

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>div move</title>
		
	</head>
	<body>
		<div id="movID"
			style="border:1px dashed blue; width: 500px; height: 500px; left:50px; top:50px; position :absolute; zIndex: 2001; background-color: #FFFFFF;">
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			var div = document.getElementById("movID");
			div.onmousedown = function(event){
				fDragging(div, event, false);
			}
		}
		function fDragging(obj, e, limit) {
		    if (!e) e = window.event;
		    var x = parseInt(obj.style.left);
		    var y = parseInt(obj.style.top);
		
		    var x_ = e.clientX - x;
		    var y_ = e.clientY - y;
		
		    if (document.addEventListener) {
		        document.addEventListener('mousemove', inFmove, true);
		        document.addEventListener('mouseup', inFup, true);
		    } else if (document.attachEvent) {
		        document.attachEvent('onmousemove', inFmove);
		        document.attachEvent('onmouseup', inFup);
		    }
		
		    inFstop(e);
		    inFabort(e);
		
		    function inFmove(e) {
		        var evt;
		        if (!e) e = window.event;
		        if (limit) {
		            var op = obj.parentNode;
		            var opX = parseInt(op.style.left);
		            var opY = parseInt(op.style.top);
		
		            if ((e.clientX - x_) < 0) return false;
		            else if ((e.clientX - x_ + obj.offsetWidth + opX) > (opX + op.offsetWidth)) return false;
		
		            if (e.clientY - y_ < 0) return false;
		            else if ((e.clientY - y_ + obj.offsetHeight + opY) > (opY + op.offsetHeight)) return false;
		        }
		
		        obj.style.left = e.clientX - x_ + 'px';
		        obj.style.top = e.clientY - y_ + 'px';
		
		        inFstop(e);
		    }
		
		    function inFup(e) {
		        var evt;
		        if (!e) e = window.event;
		
		        if (document.removeEventListener) {
		            document.removeEventListener('mousemove', inFmove, true);
		            document.removeEventListener('mouseup', inFup, true);
		        } else if (document.detachEvent) {
		            document.detachEvent('onmousemove', inFmove);
		            document.detachEvent('onmouseup', inFup);
		        }
		
		        inFstop(e);
		    }
		
		    function inFstop(e) {
		        if (e.stopPropagation) return e.stopPropagation();
		        else return e.cancelBubble = true;
		    }
		
		    function inFabort(e) {
		        if (e.preventDefault) return e.preventDefault();
		        else return e.returnValue = false;
		    }
		}
		</script>
</html>

xss23into

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js div move

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &
复制链接

扫一扫

专栏目录