Combat réel HTML5 et analyse du glisser-déposer natif (un aperçu de l'historique du glisser-déposer)

Quand je parle de glisser-déposer, je pense à un effet très intéressant lors de l'entraînement JavaScript, qui est le glisser-déposer. Vous pouvez utiliser la souris pour faire glisser un objet où vous le souhaitez.

Le premier navigateur à disposer d'une fonctionnalité de glisser-déposer JavaScript était IE4. À cette époque, il n'y avait que deux types d'objets sur la page Web qui pouvaient être glissés et déposés : les graphiques et certains textes. Lorsque vous faites glisser une image, placez la souris sur l'image et maintenez la souris enfoncée pour faire glisser. Lorsque vous faites glisser du texte, vous devez d'abord sélectionner le texte, puis faire glisser le texte sélectionné comme une image. Dans IE4, la seule cible valide pour placer du texte glissé est une zone de texte. Avec IE5.5, cela va encore plus loin, en permettant de glisser-déposer n'importe quel élément de la page Web (IE6 et supérieur prennent également en charge ces fonctions). Avec la mise à jour progressive des navigateurs et la naissance d'IE7IE8 et d'autres navigateurs, tout ce qui se trouve sur la page Web peut être glissé et déposé, mais cela n'est implémenté que via des programmes JavaScript. Ce qui suit est un petit exemple d’implémentation du glisser-déposer lorsqu’il n’y a pas de HTML5.

　Code HTML

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

　 Code JavaScript

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

　Code CSS

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

　 Jusqu'à l'émergence du HTML5. HTML5 est une spécification glisser-déposer basée sur IE. Les navigateurs prenant en charge le glisser-déposer natif sont : Chrome, Safari 3 et Firefox 3.5.

Le glisser-déposer en HTML5 peut être parfaitement glissé entre les fenêtres, entre les cadres et même entre les applications. La prise en charge du glisser-déposer par le navigateur facilite cette fonctionnalité.

Combat réel HTML5 et analyse du glisser natif (1) - un aperçu de l'historique du glisser-déposer, c'est tout pour tout le monde. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois (www.php.cn) !