HTML5实战与剖析之原生拖拽(一拖拽历史概述)

提起拖拽，我就想起了在JavaScript培训的时候一个非常好玩的效果，那就是拖拽了。可以用鼠标任意拖拽着一个物体到任何你想去的地方。

　　 JavaScript代码

window.onload = function(){
	var op = document.getElementById('p1');
	var disX = 0;
	var disY = 0;
	
	op.onmousedown = function(ev){
		var ev = ev || window.event;
		disX = ev.clientX - op.offsetLeft;
		disY = ev.clientY - op.offsetTop;
		
		//在IE下，如果选中元素拖拽就会有问题 : IE设置全局捕获：setCapture 释放全局捕获：releaseCapture
		if(op.setCapture){
			op.setCapture();
		}
		
		document.onmousemove = function(ev){
			var ev = ev || window.event;
			op.style.left = ev.clientX - disX + 'px';
			op.style.top = ev.clientY - disY + 'px';
		};
		
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
			if(op.releaseCapture){
				op.releaseCapture();
			}
		};

		//在标准浏览器下如果拖拽一个空的标签，就会有问题 : return false
		//在标准浏览器下拖拽图片会有问题：return false
		return false;
	};
	
}; 

　　 CSS代码

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

　　直到HTML5的出现。HTML5是以IE为基础制定了拖拽规范。支持原生拖拽的浏览器有：Chrome、Safari 3+和Firefox 3.5+。

　　HTML5中的拖拽，可以在窗口间、框架间，甚至在应用间进行完美拖拽。浏览器对拖拽的支持为实现这一功能实现了便利。

　　HTML5实战与剖析之原生拖拽(一)——拖拽历史概述，就为大家介绍到这里了。更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！

查看更多关于HTML5实战与剖析之原生拖拽(一拖拽历史概述)的详细内容...