JS基础-事件的拖拽

最新推荐文章于 2023-10-17 19:40:46 发布

dweblover

最新推荐文章于 2023-10-17 19:40:46 发布

阅读量248

点赞数 1

分类专栏： JavaScript 文章标签： JS基础

本文链接：https://blog.csdn.net/dweblover/article/details/86695972

版权

JavaScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

1.事件的拖拽
拖拽的流程：1.当鼠标在被拖拽元素按下时，开始拖拽。（onmousedown）;2.当鼠标移动时被拖拽的元素随鼠标移动。(onmousemove);3.当鼠标松开时被拖拽元素固定在当前位置.(onmouseup)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件的拖拽练习</title>
<style type="text/css">
#box1
{
	width:100px;
	height:100px;
	background-color:#0F0;
	position:absolute;
}
</style>
<script type="text/javascript">
//拖拽的流程：1.当鼠标在被拖拽元素按下时，开始拖拽。2.当鼠标移动时被拖拽的元素随鼠标移动。3.当鼠标松开时被拖拽元素固定在当前位置
window.function()
{
	//获取div
	var b=document.getElementById("box1");
	//绑定鼠标按下事件onmousedown
	b.onmousedown=function(event)
	{
	//当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自己身上
	//设置div捕获所有鼠标按下的事件（解决IE8兼容问题）
	//setCapture()方法只有IE支持，但在火狐中调用时不会报错，而如果在Chrome调用会报错
	if(	b.setCapture)
	{
    	b.setCapture();
    	}
		event=event||window.event;
		//求出div的偏移量，鼠标.clientX-元素.offsetLeft
		//求div的偏移量，鼠标.clientY-元素.offsetTop
		//求div偏移量的目的是为了在按下鼠标时使鼠标指针的位置固定不动
		var ol=event.clientX-b.offsetLeft;
		var ot=event.clientY-b.offsetTop;
		//为document绑定一个onmousemove事件
		document.onmousemove=function(event)
		{
			//鼠标按下开始拖拽,当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
			event=event||window.event;
			//获取鼠标坐标
			var x=event.clientX-ol;
			var y=event.clientY-ot;
			b.style.left=x+"px";
			b.style.top=y+"px";
			};
		//为document绑定一个鼠标松开事件
		document.onmouseup=function()
		{
		//当鼠标松开时被拖拽元素固定在当前位置onmouseup
		//取消onmousemove事件
		document.onmousemove=null;
		//取消document.onmouseup事件
		document.onmouseup=null;
		//取消对事件的捕获
		if(	b.releaseCapture)
		{
		b.releaseCapture();
		}
		
		};
		//当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜素内容，此时会导致拖拽功能异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消。但此方法对IE8不起作用
		return false;
	};	
};
</script>
</head>
<body>
我是一段文字
<div id="box1">
</div>
</body>
</html>

2.自定义拖拽函数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件的拖拽练习</title>
<style type="text/css">
#box1
{
	width:100px;
	height:100px;
	background-color:#0F0;
	position:absolute;
	
}
#box2
{
	width:100px;
	height:100px;
	background-color:#F60;
	position:absolute;
	left:200px;
	top:200px;
}
#box3
{
	width:100px;
	height:100px;
	background-color:#F39;
	position:absolute;
	left:300px;
	top:300px;
}
</style>
<script type="text/javascript">
//拖拽的流程：1.当鼠标在被拖拽元素按下时，开始拖拽。2.当鼠标移动时被拖拽的元素随鼠标移动。3.当鼠标松开时被拖拽元素固定在当前位置
window.function()
{
	//获取div
	var b1=document.getElementById("box1");
	var b2=document.getElementById("box2");
	var b3=document.getElementById("box3");
	drag(b1);
	drag(b2);
	drag(b3);
	
};
//提取一个专门用来设置拖拽的函数,参数有obj，代表开启拖拽的元素
function drag(obj){

	//绑定鼠标按下事件onmousedown
	obj.onmousedown=function(event)
	{
	//当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自己身上
	//设置div捕获所有鼠标按下的事件（解决IE8兼容问题）
	//setCapture()方法只有IE支持，但在火狐中调用时不会报错，而如果在Chrome调用会报错
	if(	obj.setCapture)
	{
    	obj.setCapture();
    	}
		event=event||window.event;
		//求出div的偏移量，鼠标.clientX-元素.offsetLeft
		//求div的偏移量，鼠标.clientY-元素.offsetTop
		//求div偏移量的目的是为了在按下鼠标时使鼠标指针的位置固定不动
		var ol=event.clientX-obj.offsetLeft;
		var ot=event.clientY-obj.offsetTop;
		//为document绑定一个onmousemove事件
		document.onmousemove=function(event)
		{
			//鼠标按下开始拖拽,当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
			event=event||window.event;
			//获取鼠标坐标
			var x=event.clientX-ol;
			var y=event.clientY-ot;
			obj.style.left=x+"px";
			obj.style.top=y+"px";
			};
		//为document绑定一个鼠标松开事件
		document.onmouseup=function()
		{
		//当鼠标松开时被拖拽元素固定在当前位置onmouseup
		//取消onmousemove事件
		document.onmousemove=null;
		//取消document.onmouseup事件
		document.onmouseup=null;
		//取消对事件的捕获
		if(	obj.releaseCapture)
		{
		obj.releaseCapture();
		}
		};
		//当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜素内容，此时会导致拖拽功能异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消。但此方法对IE8不起作用
		return false;
	};	
	}
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>