HTML5 actual combat and analysis of native drag and drop (three dataTransfer objects)

HTML5 drag and drop data transmission

Although native drag and drop is implemented through dragstart, drag and dragend events. But this is just drag and drop. There are still some drag and drop problems in IE6 and IE7, and data exchange is not implemented. In order to realize the exchange of data, IE5 introduced the dataTransfer object. The dataTransfer object is a property of the event object, used to transfer data in string format from the dragged element to the drop target. Because it is a property of the event object, the dataTransfer object can only be accessed within the event handler of the drag-and-drop event. In the event handler, you can use the properties and methods of this object to complete the drag-and-drop functionality.

The dataTransfer object has two main methods: getData() method and setData() method. From the English literal meanings of these two methods, you can roughly guess their uses. The getData() method can obtain the value saved by the setData() method. The first parameter of the setData() method, which is also the only parameter of the getData() method, is a string used to save the data type, and the value is "text" or "URL".

IE only defines two valid data types: "text" or "URL", while HTML5 extends this to allow various MIME types to be specified. For backward compatibility, HTML5 also supports "text" or "URL", but these two types will be mapped to "text/plain" or "text/url-list".

Actually, the dataTransfer object can save a value for each MIME type. In other words, there will be no other problems when colleagues save a piece of text and a URL in this object. However, the data stored in the dataTransfer object can only be read in the drop event handler. If the data is not read in the ondrop handler, the dataTransfer object has been destroyed and the data is lost.

When dragging the text in the text box, the browser will call the setData() method to save the dragged text in the dataTransfer object in the "text" format. Similarly, when dragging and dropping a link or image, the setData() method is called and the URL is saved. Then, when these elements are dragged and dropped into the drop target, the data can be read through the getData() method. Of course, as a developer, you can also manually save the data you want to transfer by calling setData() in the dragstart event handler for future use.

There is a difference between saving data in text and saving it as URL. If you save the data in text format, the data does not receive any special treatment. If saved in URL format, the browser will treat it as a link in the web page. If you place this URL in another browser window, you can open the URL.

Firefox 5 and earlier versions cannot map "url" and "text" to "" and "text/plain". But it can map "Text" (uppercase T) to "text/plain". In order to better obtain data from the dataTransfer object in a cross-browser situation, it is best to detect two values ​​when obtaining URL data, and use "Text" when obtaining text data.

Note, be sure to put the short data type first, because IE10 and previous versions still do not support extended MIME type names, and they will report an error when encountering unrecognized data types. However, the "text" or "URL" value is only mandatory for IE. Setting strings with any other value in Firefox 3.6+, Chrome and Opera can also be executed normally.

　dropEffect attribute and effectAllowed attribute

Using the dataTransfer object can not only transfer data, but also determine what operations the dragged element and the element as the placement target can receive through the dataTransfer object. To achieve such a function, the dropEffect attribute and effectAllowed attribute are used.

dropEffect attribute

Among them, the dropEffect attribute can be used to know what kind of behavior the dragged element can perform. The four values ​​​​of this attribute are as follows:

　none: The dragged element cannot be placed here. This is the default value for all elements except text boxes.

　move: The dragged element should be moved to the drop target.

　copy: The dragged element should be copied to the drop target.

　link: Placing the target will open the dragged element (but the dragged element must be a link with a URL address).

When dragging an element onto the drop target, each of the above values ​​will cause the cursor to display as a different symbol.

EffectAllowed attribute

The dropEffect attribute alone is not very useful. It can only be effective when used in conjunction with the effectAllowed attribute. The effectAllowed attribute indicates which behavior of dragging elements is allowed (dropEffect). The effectAllowed attribute also has many values, and its values ​​are as follows:

　uninitialized: No placement behavior is set for the dragged element.

　none: The dragged element cannot have any behavior.

　copy: Only dropEffect with value "copy" is allowed.

　link: Only dropEffect with value "link" is allowed.

　move: Only dropEffect with value "move" is allowed.

　copyLink: Allows dropEffect with values ​​​​of "copy" and "link".

　copyMove: Allows dropEffect with values ​​​​of "copy" and "move".

　linkMove: Allows dropEffect with values ​​​​of "link" and "move".

　all: Allow any dropEffect.

To set the effectAllowed property, it must be set in the ondragstart event handler. A small example is as follows

　HTML code

<ul>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
</ul>
<a href="http://www.baidu.com/">梦龙小站</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;;
			
			ev.dataTransfer.setDragImage(this,0,0);
		
		};
		
		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;) );
	
	};
	
};

The above is the actual combat and analysis of HTML5 native drag and drop (three dataTransfer objects). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

##