HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

　　可拖动dragable属性

　　之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了。今天为大家介绍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拖拽其他成员

　　dragable属性及其他成员小例子

　　 HTML代码

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

　　 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代码

//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 = 'yellow';
			
			ev.dataTransfer.setData('a','hello');  //存储一个键值对 : value值必须是字符串
			
			ev.dataTransfer.effectAllowed = 'all';
			
			ev.dataTransfer.setDragImage(this,0,0);
		
		};
		
		aLi[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = '';
		
		};
	}
	for(var i=0;i<aA.length;i++){
	
		aA[i].ondragstart = function(ev){ //拖拽前触发
		
			this.style.background = 'yellow';
			
			ev.dataTransfer.setData('a','hello');  //存储一个键值对 : value值必须是字符串
			
			ev.dataTransfer.effectAllowed = 'link';
			
		
		};
		
		aA[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = '';
		
		};
	}
	
	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){  //释放鼠标的时候触发
	
		this.style.background = 'red';	
	
		alert( ev.dataTransfer.getData('a') );
		alert( ev.dataTransfer.types );
	
	};
	
}; 

　　桌面拖拽到页面中的小例子

　　 HTML代码

//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]);
	
	};
	
}; 

　　 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代码

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

　　 垃圾箱删除小例子

　　 HTML代码

<ul>
	<li draggable="true">a</li>
	<li draggable="true">b</li>
	<li draggable="true">c</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; color:white;} 

　　 JavaScript代码

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

window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var op = document.getElementById('p1');
	var iNow = 0;
	
	var targetLi = null;
	
	for(var i=0;i<aLi.length;i++){
	
		aLi[i].ondragstart = function(ev){ //拖拽前触发
		
			this.style.background = 'yellow';
			
			ev.dataTransfer.setData('text',this.innerHTML);  //存储一个键值对 : value值必须是字符串
			
			targetLi = this;
		
		};
		
		aLi[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = '';
		
		};
	}
	
	op.ondragenter = function(){  //相当于onmouseover
		
		this.style.background = 'green';
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = 'red';
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		
	};
	
	op.ondrop = function(ev){  //释放鼠标的时候触发
	
		this.style.background = 'red';	
	
		var oText = ev.dataTransfer.getData('text');
	
		if(targetLi){
			targetLi.parentNode.removeChild(targetLi);
			this.innerHTML = '删除的是:'+oText;
		}
	
	};
	
}; 

HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)就为大家介绍到这里了，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)的详细内容...