标签在鼠标按下后跟随鼠标移动,兼容低版本IE

最新推荐文章于 2020-12-07 16:53:45 发布

剑锋之行

最新推荐文章于 2020-12-07 16:53:45 发布

阅读量310

点赞数

分类专栏： javascript html5 文章标签： html javascript css 鼠标 ie

本文链接：https://blog.csdn.net/lijianfengxiaoli/article/details/80169263

版权

javascript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

html5

9 篇文章 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" xml:lang="en" style="overflow-y: scroll;">

	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=8;" />
		<meta charset="utf-8"/>
		<style type="text/css">
			html,
			body {
				height: 100%;
				width: 100%;
				padding: 0;
				margin: 0;
			}
			
			.dialog {
				width: 250px;
				height: 250px;
				position: absolute;
				background-color: #ccc;
				-webkit-box-shadow: 1px 1px 3px #292929;
				-moz-box-shadow: 1px 1px 3px #292929;
				box-shadow: 1px 1px 3px #292929;
				margin: 10px;
			}
			
			.dialog-title {
				color: #fff;
				background-color: #404040;
				font-size: 12pt;
				font-weight: bold;
				padding: 4px 6px;
				cursor: move;
			}
			
			.dialog-content {
				padding: 4px;
			}
		</style>
	</head>

	<body>
		<div id="dlgTest" class="dialog">
			<div class="dialog-title">Dialog</div>
			<!--<div class="dialog-content">
				This is a draggable test.
			</div>-->
		</div>
		<div id="dlgTest1" class="dialog">
			<div class="dialog-title">Dialog</div>
			<!--<div class="dialog-content">
				This is a draggable test.
			</div>-->
		</div>
		<div>
			这是其他
		</div><div>
			这是其他
		</div><div>
			这是其他
		</div><div>
			这是其他
		</div><div>
			这是其他
		</div>
		<script type="text/javascript">
			// IE8以及以下不支持addEventListener事件，这里用attachEvent代替。

			var Event = {
				addHandler: function(oElement, sEvent, fnHandler) {
					if(oElement.addEventListener) {
						oElement.addEventListener(sEvent, fnHandler, false);
					} else {
						oElement.attachEvent("on" + sEvent, fnHandler);
					}
				},
				removeHandler: function(oElement, sEvent, fnHandler) {
					oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler)
				}
			}
			var Dragging = function(validateHandler) { //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
				var draggingObj = null; //dragging Dialog
				var diffX = 0;
				var diffY = 0;

				function mouseHandler(e) {
					switch(e.type) {
						case 'mousedown':
							draggingObj = validateHandler(e); //验证是否为可点击移动区域
							if(draggingObj != null) {
								diffX = e.clientX - draggingObj.offsetLeft;
								diffY = e.clientY - draggingObj.offsetTop;
							}
							break;

						case 'mousemove':
							if(draggingObj) {
								var tempLeft= e.clientX - diffX;
								if(tempLeft<0 || tempLeft>640){
									break;
								}
								draggingObj.style.left = tempLeft + 'px';
								if(draggingObj.id=='dlgTest'){
									console.log('dlgTest')
								}else{
									console.log('dlgTest1')
								}
								//draggingObj.style.top = (e.clientY - diffY) + 'px';
							}
							break;

						case 'mouseup':
							draggingObj = null;
							diffX = 0;
							diffY = 0;
							break;
					}
				};

				return {
					enable: function() {
						Event.addHandler(document, 'mousedown', mouseHandler);
						Event.addHandler(document, 'mousemove', mouseHandler);
						Event.addHandler(document, 'mouseup', mouseHandler);
					},
					disable: function() {
						Event.removeHandler(document, 'mousedown', mouseHandler);
						Event.removeHandler(document, 'mousemove', mouseHandler);
						Event.removeHandler(document, 'mouseup', mouseHandler);
					}
				}
			}

			/**
			 * 获取要执行的对象
			 **/
			function getDraggingDialog(e) {
				// 兼容IE8、IE7处理
				var event = window.event || e;
				var target = event.srcElement || event.target;
				while(target && target.className.indexOf('dialog-title') == -1) {
					target = target.offsetParent;
				}
				if(target != null) {
					return target.offsetParent;
				} else {
					return null;
				}
			}

			Dragging(getDraggingDialog).enable();
		</script>
	</body>

</html>

剑锋之行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签在鼠标按下后跟随鼠标移动,兼容低版本IE

html, body { height: 100%; width: 100%; padding: 0; margin: 0; } .dialog { width: 250px; height: 250px; position: absolute; background-color: #ccc; -we
复制链接

扫一扫