HTML5實戰與剖析之原生拖曳(一拖曳歷史概述)

　　提起拖拽，我就想起了在JavaScript培訓的時候一個非常好玩的效果，那就是拖曳了。可以用滑鼠任意拖曳著一個物體到任何你想去的地方。

　　最早擁有JavaScript拖曳功能的是IE4瀏覽器。當時，網頁中只有兩種物件是可以拖曳的，那就是：圖形和某些文字。拖曳圖像的時候，把滑鼠放在圖像上，按住滑鼠不放就可以拖曳了。拖曳文字時，要先選取文字，然後可以像拖曳圖像一樣拖曳選取的文字。在IE4中，唯一有效的放置拖曳文字的目標是文字方塊。到了IE5.5更進一步，讓網頁中的任何元素都可以拖曳(IE6以上也支援這些功能了)。隨著瀏覽器一點點更新換代，隨著IE7IE8以及其他瀏覽器的誕生，網頁中所有東西都可以拖曳了，只不過是透過JavaScript程式來實現的。下面就是沒有HTML5的時候，拖曳的實作小例子。

　　HTML代碼

<p id="p1" style="width:100px; height:100px; background:red; position:absolute;">梦龙小站</p>

　〜　　CSS代碼

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;
	};
	
};

　　直到HTML5的出現。 HTML5是以IE為基礎制定了拖曳規範。支援原生拖曳的瀏覽器有：Chrome、Safari 3+和Firefox 3.5+。

　　HTML5中的拖曳，可以在窗口間、框架間，甚至在應用間進行完美拖曳。瀏覽器對拖曳的支援為實現此功能實現了便利。 　　HTML5實戰與剖析之原生拖曳(一)－拖曳歷史概述，就為大家介紹到這裡了。更多相關內容請關注PHP中文網（www.php.cn）！