JS基础-事件的拖拽

缺乏、安全感 2022-04-23 09:02 250阅读 0赞

**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>