HTML5實戰與剖析之原生拖曳(四可拖曳dragable屬性和其他成員)

　　可拖曳dragable屬性

　　之前我們已經為大家介紹過幾篇相關了。今天為大家介紹HTML5拖曳中的其他一些小東東，閒話不多說趕快一起看看吧。

　　在預設情況下，連結、文字和圖像是可以拖曳的，不用再寫程式碼即可拖曳。如果想讓其他元素標籤也可以拖曳，那麼只有HTML5能實現了。 HTML5為所有HTML元素規定了dragable屬性，表示元素是否可以拖曳。在連結和圖像的標籤中自動將dragable屬性自動被設定成true，其他元素的dragable屬性的預設值是false。

　　支援dragable屬性的瀏覽器有：Firefox 4+、Chrome、IE 10+和Safari 5+。 Opera 11.5及之前的版本是不支援HTML5的拖放功能。另外能夠讓Firefox支援可拖曳屬性必須新增一個ondragstart事件處理程序，並在dataTransfer物件中保存一些資訊才可以。在IE 9及更早版本中，透過mousedown事件處理程序呼叫dragDrop()方法能夠讓任何元素可以拖曳。在Safari 4及更早的版本中，必須額外為對應的元素設定CSS樣式 -khtml-user-drag: element才可以拖曳。

　　HTML5拖曳其他成員

　㟎

㟎

　〜之前介紹過一些關於數據的屬性。以下的一些方法和屬性是其中有可能漏掉的屬性和方法。

　　addElement(element)：為拖曳操作新增一個元素。新增這個元素只會影響資料(即增加作為拖曳來源而回應回呼的物件)，不會影響拖曳操作時頁面元素的外觀。直到寫這篇部落格的時候，只有Firefox 3.5+實現這種方法了。

　　clearData(format)：清除以特定格式儲存的資料。實作這個方法的瀏覽器有Firefox 3.5+、Safari 4+、IE和Safari 4+。

　　setDragImge(element, x, y)：指定一幅圖像，當拖曳發生的時候，顯示在遊標下方。這個方法接收的參數有三個分別是：要顯示的HTML元素和遊標在影像中的x、y座標。其中，HTML元素可以是一幅影像，也可以是其他元素。是圖像的話就顯示圖像，是其他元素的話就顯示渲染後的元素。支援的瀏覽器有：Safari 4+、Chrome和Firefox 3.5+。

　　Types：目前已儲存的資料類型。這是一個類似數組的集合，以”text”這樣的字串形式保存著資料類型。支援的瀏覽器有：Chrome、Firefox 3.5+和IE 10+。

　　了解過了一些理論知識，接下來一個小例子讓大家更加加深理解。

　　dragable屬性及其他成員小例子

　　CSS程式碼

<ul>
	<li draggable="true">a</li>
	<li draggable="true">b</li>
	<li draggable="false">c</li>
</ul>
<a href="http://www.baidu.com/">d</a>
<p id="p1"></p>

　　JavaScript程式碼

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

　　桌面拖曳到頁面中的小範例

　〜＜

　〜＜ CSS程式碼

//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的
//拖动不带链接的li，会起作用但不跳转链接
//拖动带连接的a，会起作用也跳转

window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var aA = document.getElementsByTagName('a');
	var op = document.getElementById('p1');
	
	for(var i=0;i<aLi.length;i++){
	
		aLi[i].ondragstart = function(ev){ //拖拽前触发
		
			this.style.background = &#39;yellow&#39;;
			
			ev.dataTransfer.setData(&#39;a&#39;,&#39;hello&#39;);  //存储一个键值对 : value值必须是字符串
			
			ev.dataTransfer.effectAllowed = &#39;all&#39;;
			
			ev.dataTransfer.setDragImage(this,0,0);
		
		};
		
		aLi[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = &#39;&#39;;
		
		};
	}
	for(var i=0;i<aA.length;i++){
	
		aA[i].ondragstart = function(ev){ //拖拽前触发
		
			this.style.background = &#39;yellow&#39;;
			
			ev.dataTransfer.setData(&#39;a&#39;,&#39;hello&#39;);  //存储一个键值对 : value值必须是字符串
			
			ev.dataTransfer.effectAllowed = &#39;link&#39;;
			
		
		};
		
		aA[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = &#39;&#39;;
		
		};
	}
	
	op.ondragenter = function(){  //相当于onmouseover
		
		this.style.background = &#39;green&#39;;
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = &#39;red&#39;;
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		ev.dataTransfer.dropEffect = &#39;link&#39;;  //真对外部文件
		
	};
	
	op.ondrop = function(ev){  //释放鼠标的时候触发
	
		this.style.background = &#39;red&#39;;	
	
		alert( ev.dataTransfer.getData(&#39;a&#39;) );
		alert( ev.dataTransfer.types );
	
	};
	
};

　　JavaScript程式碼

//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的

window.onload = function(){

	var op = document.getElementById('p1');
	
	
	
	
	op.ondragenter = function(){  //相当于onmouseover
		
		this.style.background = 'green';
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = 'red';
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		ev.dataTransfer.dropEffect = 'link';  //真对外部文件
		
	};
	
	op.ondrop = function(ev){  //释放鼠标的时候触发
	
		ev.preventDefault();  //阻止默认行为
	
		this.style.background = 'red';	
		
		var oFR = new FileReader();
	
		var list = ev.dataTransfer.files;  //当前拖拽的那个文件(返回的一个文件列表)
		
		//alert(list.length);
		
		//type : 文件类型
		
		//alert(list[0].type);
		
		
		oFR.onload = function(){ //读取完成，触发事件
			
			alert(this.result);  // 读取到的信息
			
		};
		
		oFR.readAsDataURL(list[0]);
	
	};
	
};

　　垃圾箱刪除小例子

　　㟎程式碼

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

　　JavaScript代碼

<p id="p1">梦龙小站</p>

HTML5實戰與剖析之原生拖曳(四可拖曳dragable屬性和其他成員)就為大家介紹到這裡了，更多相關內容請關注PHP中文網（www.php.cn）！