当前位置:Gxlcms > html代码 > HTML5实战与剖析之原生拖拽(二拖拽事件dragstart、drag和dragend)

HTML5实战与剖析之原生拖拽(二拖拽事件dragstart、drag和dragend)

时间:2021-07-01 10:21:17 帮助过:29人阅读

  拖拽事件

  通过拖拽事件,咱们就可以控制拖拽很多东西了。其中什么元素或者是哪里发生了拖拽事件是最关键的。有些事件是在被拖动的元素上触发,有些事件是在放置目标上触发的。拖动某元素时候,触发的事件有:dragstart事件、drag事件和dragend事件。

  按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件。这时候光标变成”不能放”符号(圆环中有一条反斜线),表示不能把元素放在自己上门。拖拽开始时,可以通过ondragstart事件处理程序运行JavaScript代码。

  触发dragstart事件后,随即会触发drag事件,而在元素被拖动期间会持续触发drag事件。这个事件与mousemove和touchmove事件类似。当拖动停止时(无论把元素放到了有效的放置目标,还是放到了无效的放置目标上),都会发生dragend事件。

  上面说的三个事件的目标都是被拖动的元素触发。默认情况下,浏览器不会再拖动期间改变被拖动元素的外观。但是可以自行修改。不过,大多数浏览器会为正被拖动的元素创建一个半透明的副本,这个副本始终跟随光标移动。当某个元素被拖动到一个有效的放置目标的时候,会触发的事件有:dragenter事件、dragover事件和dragleave或者drop事件。

  只要有元素被拖动到放置目标上,就会触发dragenter事件(类似于mouseover事件)。紧随其后的是dragover事件,而且在被拖动的元素还在放置目标的范围内移动是,会连续触发dragover事件。如果元素被拖出放置目标,dragover事件不再发生,但是会触发dragleave事件(类似于mouseout事件)。如果元素被放到了放置目标中会触发drop事件而不是dragleave事件。dragenter事件、dragover事件和dragleave或者drop事件的目标都是作为放置目标的元素。

  自定义放置目标

  在拖动元素经过某些无效放置目标的时候,可以看到一种特殊鼠标手势(圆环中一条反斜线),表示不能放置。虽然所有元素都支持放置目标事件,但是这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素,无论用户如何操作,都不会发生drop事件。不过,你可以把任何元素变成有效的放置目标,方法是重写dragenter和dragover事件的默认行为。

  重写了默认行为之后,就会发现当拖动着元素移动到放置目标上的时候,光标变成允许放置的符号。在Firefox 3.5+中,放置事件的默认行为是打开被放到放置目标上的url。如果是把图像拖到放置目标上,页面就会转向图像文件。如果是把文本拖放到放置目标上,则会导致无效url错误。所以为了让Firefox支持政正常的拖放,还要取消drop事件的默认行为,阻止打开拖拽元素的URL。小例子如下

  HTML代码

<!-- 拖拽”梦龙小站”到”梦龙”地方的小例子 -->
<ul>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
</ul>
<p id="p1">梦龙</p>

  CSS代码

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}

  JavaScript代码

window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var op = document.getElementById('p1');
	var iNow = 0;
	
	
	for(var i=0;i<aLi.length;i++){
		aLi[i].ondragstart = function(){ //拖拽前触发
		
			this.style.background = 'yellow';
		
		};
		
		aLi[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = '';
		
		};
		
		/*aLi[i].ondrag = function(){ //开始与结束之间,连续触发
			
			document.title = iNow++;
			
		};*/
	}
	
	op.ondragenter = function(){  //相当于onmouseover

		this.style.background = 'green';
		
		ev.preventDefault();  //阻止默认事件:元素就可以释放了
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = 'red';
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间,连续触发
		
		ev.preventDefault();  //阻止默认事件:元素就可以释放了
		
		document.title = iNow++;
		
	};

	op.ondrop = function(ev){  //释放鼠标的时候触发

		
	
		this.style.background = 'red';	
	
		alert("梦龙小站,鼠标已经释放");

		ev.preventDefault();  //阻止默认事件:防止打开拖拽元素的url
	
	};
	
};

以上就是的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!

人气教程排行