HTML5 actual combat and analysis of native drag (four dragable attributes and other members)

Dragable attribute

We have introduced several relevant knowledge about native drag and drop in HTML5 before. Today I will introduce to you some other small things in HTML5 drag and drop. Without further ado, let’s take a look together.

By default, links, text and images can be dragged, and you can drag them without writing code. If you want other element tags to be draggable, then only HTML5 can do it. HTML5 specifies the dragable attribute for all HTML elements, indicating whether the element can be dragged. The dragable attribute is automatically set to true in link and image tags, and the default value of the dragable attribute of other elements is false.

The browsers that support the dragable attribute are: Firefox 4+, Chrome, IE 10+ and Safari 5+. Opera 11.5 and earlier versions do not support the HTML5 drag-and-drop function. In addition, to enable Firefox to support draggable properties, you must add an ondragstart event handler and save some information in the dataTransfer object. In IE 9 and earlier, calling the dragDrop() method through the mousedown event handler made any element draggable. In Safari 4 and earlier versions, you must additionally set the CSS style for the corresponding element -khtml-user-drag: element can be dragged.

## HTML5 dragging other members

I have introduced some properties of the dataTransfer object before, but they are not comprehensive. Some of the methods and properties below are those that may have been missed.

　addElement(element): Add an element for drag operation. Adding this element only affects the data (that is, adding an object that serves as the drag source and responds to the callback) and will not affect the appearance of the page element during the drag operation. As of the time of writing this blog, only Firefox 3.5+ implements this method.

clearData(format): Clear data saved in a specific format. Browsers that implement this method include Firefox 3.5+, Safari 4+, IE and Safari 4+.

setDragImge(element, x, y): Specify an image to be displayed under the cursor when dragging occurs. This method receives three parameters: the HTML element to be displayed and the x and y coordinates of the cursor in the image. Among them, the HTML element can be an image or other elements. If it is an image, the image will be displayed. If it is another element, the rendered element will be displayed. Supported browsers are: Safari 4+, Chrome and Firefox 3.5+.

Types: The currently saved data type. This is an array-like collection that stores data types in the form of strings such as "text". Supported browsers are: Chrome, Firefox 3.5+ and IE 10+.

After understanding some theoretical knowledge, here is a small example to deepen your understanding.

## Small examples of dragable attributes and other members

　

HTML code

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

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

　

JavaScript code

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

## Drag the desktop to the page Small example in

　

HTML code##

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

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

　

JavaScript code

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

Trash deletion example

　

HTML code

<ul>
	<li draggable="true">a</li>
	<li draggable="true">b</li>
	<li draggable="true">c</li>
</ul>
<p id="p1">垃圾箱</p>

CSS code

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 code

//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 = &#39;yellow&#39;;
			
			ev.dataTransfer.setData(&#39;text&#39;,this.innerHTML);  //存储一个键值对 : value值必须是字符串
			
			targetLi = this;
		
		};
		
		aLi[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();  //阻止默认事件：元素就可以释放了
		
		
	};
	
	op.ondrop = function(ev){  //释放鼠标的时候触发
	
		this.style.background = &#39;red&#39;;	
	
		var oText = ev.dataTransfer.getData(&#39;text&#39;);
	
		if(targetLi){
			targetLi.parentNode.removeChild(targetLi);
			this.innerHTML = &#39;删除的是:&#39;+oText;
		}
	
	};
	
};

HTML5 actual combat and analysis of native drag (four dragable attributes and other members) is introduced here. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

#