HTML5 actual combat and analysis of native drag and drop (an overview of drag and drop history)

When I mention drag and drop, I think of a very interesting effect during JavaScript training, which is drag and drop. You can use the mouse to drag an object anywhere you want.

The first browser to have JavaScript drag and drop functionality was IE4. At that time, there were only two types of objects on the web page that could be dragged and dropped: graphics and certain text. When dragging an image, place the mouse on the image and hold down the mouse to drag. When dragging text, you must first select the text, and then drag the selected text like an image. In IE4, the only valid target for placing dragged text is a text box. With IE5.5, it goes a step further, allowing any element in the web page to be dragged and dropped (IE6 and above also support these functions). With the gradual updating of browsers, and the birth of IE7IE8 and other browsers, everything on the webpage can be dragged and dropped, but it is only implemented through JavaScript programs. The following is a small example of drag and drop implementation when there is no HTML5.

　HTML code

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

　JavaScript code

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

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

Until the emergence of HTML5. HTML5 is a drag-and-drop specification based on IE. Browsers that support native drag and drop include: Chrome, Safari 3+ and Firefox 3.5+.

　Drag and drop in HTML5 can be perfectly dragged between windows, between frames, and even between applications. Browser support for drag and drop facilitates this functionality.

HTML5 actual combat and analysis of native drag (1) - an overview of drag and drop history, that’s it for everyone. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!

#