js-拖拽-优化

最新推荐文章于 2022-11-22 22:10:43 发布

¡Venceremo

最新推荐文章于 2022-11-22 22:10:43 发布

阅读量471

点赞数

分类专栏： javascript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127520297

版权

javascript 专栏收录该内容

133 篇文章 0 订阅

订阅专栏

文字可以拖拽

当拖拽一个网页中的内容的时候，浏览器会默认去搜索引擎中搜索内容，此时会带导致拖拽功能异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，可以通过return false来取消默认行为————但是对IE8不起作用

btn01.setCapture();//IE8有的：火狐报错，但可以，chrome会报错
当调用一个元素的setCapture()方法以后，这个元素会把下一次所有的鼠标按下相关的事件捕获到自身上也就点2 出来1——任何一个都会被btn01捕获--点其他相当于点btn01——是一次性的--

		<script>
			window.onload = function() {
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				btn01.onclick=function(){
					alert("01");
				};
				btn02.onclick=function(){
					alert("02");
				};
				//IE8有的：
				//当调用一个元素的setCapture()方法以后，
				//这个元素会把下一次所有的鼠标按下相关的事件捕获到自身上
				//也就点2 出来1 点1 出来2
				btn01.setCapture();
			}

所以IE8设置强制捕获任何鼠标点击事件：
当鼠标按下的时候：所有的事件都是转到box1上，不会出现干扰

会出现一直捕获：当鼠标按下，就会设置捕获，其他的按下事件也被被捕获进来就会重复执行：

需要取消

box1.releaseCapture();//取消捕获

设置全部适用：

		if(box1.setCapture){
						box1.setCapture();
					}

等价于

	box1.setCapture&&box1.setCapture();

将拖拽转成函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#box1 {
			width: 100px;
			height: 100px;
			background-color: #bfa;
			position: absolute;
	
		}
		#box2 {
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			left: 200px;
			top: 300px;
		
		}
	</style>
	<script>
		//开启拖拽的元素
		function drag(obj){
			obj.onmousedown = function(event) {
				obj.setCapture&&obj.setCapture();
				event = event || window.event;
				//div偏移量=鼠标.clientX-元素.offsetLeft
				//div偏移量=鼠标.clientY-元素.offsetTop
				var offsetx = event.clientX - obj.offsetLeft;
				var offsety = event.clientY - obj.offsetTop;
			
				document.onmousemove = function(event) {
					event = event || window.event;
					//获取鼠标的位置：
					var x = event.clientX - offsetx;
					var y = event.clientY - offsety;
			
					//修改box1的位置
					obj.style.left = x + "px";
					obj.style.top = y + "px";
			
				};
				//为元素绑定一个松开事件
				document.onmouseup = function() {
					//当松开时候，被拖拽元素固定在当前位置
					//取消onmousemove事件
					document.onmousemove = null
					document.onmouseup = null; //一次性事件
					//IE8取消对事件的捕获
					obj.releaseCapture&&obj.releaseCapture();
					
				};
				return false;
			
			};
		};
		window.onload = function(event) {
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				drag(box1);
				drag(box2);
		}
	</script>
	
	<body>
		<p>我是一段文字</p>
		<div id="box1">
		</div>
		<div id="box2"></div>
	</body>
</html>

前提：需要

¡Venceremo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js-拖拽-优化

当调用一个元素的setCapture()方法以后，这个元素会把下一次所有的鼠标按下相关的事件捕获到自身上也就点2 出来1——任何一个都会被btn01捕获--点其他相当于点btn01——是一次性的--，这个是浏览器提供的默认行为，如果不希望发生这个行为，可以通过return false来取消默认行为————//IE8有的：火狐报错，但可以，chrome会报错。当拖拽一个网页中的内容的时候，浏览器会默认去搜索引擎中搜索内容，此。当鼠标按下的时候：所有的事件都是转到box1上，不会出现干扰。
复制链接

扫一扫