JS封装元素拖拽

最新推荐文章于 2024-06-26 09:51:03 发布

qq_41131754

最新推荐文章于 2024-06-26 09:51:03 发布

阅读量109

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_41131754/article/details/104180641

版权

（纯粹为了便于自己复习记忆！欢迎批评指正！）

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<div style="height:100px;width:100px;background-color: deepskyblue;position: absolute;left: 0px;top: 0px;
			border-radius: 50%;overflow: hidden;">
		<a href="https://www.baidu.com" target="_blank" style="display:block;height:100%;width: 100%;border: solid 8px pink;
				box-sizing: border-box;border-radius: 50%;text-align: center;line-height: 80px;text-decoration: none;font-size: 30px;
				font-weight: bold;">baidu</a>
	</div>
</body>
<!--<script type="text/javascript" src="js/我的库.js"></script>-->
<script>
	var div = document.getElementsByTagName('div')[0];
	var a = div.getElementsByTagName('a')[0];
	move(div, a);

// 封装的运动方法
function move(elem, a) {

		addEvent(elem, 'mousedown', go); //给对象加上一个按压事件
		
		function go(e) {
			var event = e || window.event;//兼容IE
			var disX, disY;//鼠标距离元素周围的距离
			var firstTime = 0;//down的的时间
			var lastTime = 0;//up的时间
			firstTime = new Date().getTime();//记录按下去的时间
			disX = e.pageX - parseInt(elem.style.left); //让单击位置的出生点和div一致
			disY = e.pageY - parseInt(elem.style.top);
			addEvent(document, 'mousemove', moving); //用document而不用elem是因为防止速度太快来不及监听就移出了elem范围
			addEvent(document, 'mouseup', stopUp); //该兼容方法封装在第57行
			stopBubble(event); //不允许事件冒泡69行
			cancelHandler(event); //阻止默认事件77行
			function moving(e) {
				var event = e || window.event;
				elem.style.left = event.pageX - disX + "px";
				elem.style.top = event.pageY - disY + "px";
			}

			function stopUp() { //抬起时清除多余的监听事件等
				lastTime = new Date().getTime();//监听抬起的时间
				
			if(lastTime - firstTime > 250) {//如果一个单击的生物行为时间大于这个时间，则取消跳转
				a.onclick = function() {
					return false;
				}
			} else {
				a.onclick = function() {
					return true;
				}
			}
				document.removeEventListener('mousemove', moving, false);//移除事件
				document.removeEventListener('mouseup', stopUp, false);
			}

		}
	}


	//封装一个事件监听方法，解决IE10以下特有监听类型的问题和老版IE监听方法中this指向window的问题

//封装与IE兼容的修改事件冒泡的方法
function stopBubble(event){
if(event.stopPropagation){ //不支持IE浏览器！
event.stopPropagation();
}else{
event.cancelBubble = true;//针对IE兼容的方法
}
}
//封装阻止默认事件的兼容IE的方法
function cancelHandler(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}

qq_41131754

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS封装元素拖拽

（纯粹为了便于自己复习记忆！欢迎批评指正！）<head> <meta charset="UTF-8"> <title></title></head><body> <div style="height:100px;width:100px;background-color: deepskyblue;posi...
复制链接

扫一扫