Combat réel HTML5 et analyse du glisser natif (deux événements de glisser dragstart, drag et dragend)

Événements de glisser

Grâce aux événements de glisser, nous pouvons contrôler le déplacement de beaucoup de choses. L'élément ou l'endroit où l'événement de glissement se produit est le plus critique. Certains événements sont déclenchés sur l'élément déplacé et d'autres sur la cible de dépôt. Lorsqu'un élément est déplacé, les événements déclenchés sont : l'événement dragstart, l'événement drag et l'événement dragend.

Lorsque vous appuyez sur le bouton de la souris et commencez à déplacer la souris, l'événement dragstart sera déclenché sur l'élément déplacé. A ce moment, le curseur se transforme en symbole « ne peut pas être placé » (il y a une barre oblique inverse dans le cercle), indiquant que l'élément ne peut pas être placé sur sa propre porte. Lorsque le glisser commence, le code JavaScript peut être exécuté via le gestionnaire d'événements ondragstart.

Une fois l'événement dragstart déclenché, l'événement glisser sera déclenché immédiatement et l'événement glisser continuera à être déclenché pendant que l'élément est déplacé. Cet événement est similaire aux événements mousemove et touchmove. Lorsque le glissement s'arrête (que l'élément soit placé sur une cible de dépôt valide ou non valide), l'événement dragend se produit.

Les cibles des trois événements mentionnés ci-dessus sont toutes déclenchées par l'élément glissé. Par défaut, le navigateur ne modifie pas l'apparence de l'élément déplacé lors du déplacement. Mais vous pouvez le modifier vous-même. Cependant, la plupart des navigateurs créent une copie semi-transparente de l'élément déplacé, qui suit toujours le curseur. Lorsqu'un élément est glissé vers une cible de dépôt valide, les événements qui seront déclenchés sont : l'événement dragenter, l'événement dragover et l'événement dragleave ou drop.

Tant qu'un élément est glissé vers la cible de dépôt, l'événement dragenter (similaire à l'événement mouseover) sera déclenché. Ceci est suivi de l'événement dragover, et lorsque l'élément déplacé se déplace toujours dans la plage de la cible de dépôt, l'événement dragover sera déclenché en continu. Si l'élément est glissé hors de la cible de dépôt, l'événement dragover ne se produit plus, mais l'événement dragleave est déclenché (similaire à l'événement mouseout). Si l'élément est placé dans la cible de dépôt, l'événement drop sera déclenché à la place de l'événement dragleave. Les cibles des événements dragenter, des événements dragover et des événements dragleave ou drop sont tous des éléments qui servent de cibles de dépôt.

Cibles de placement personnalisées

Lorsque vous faites glisser un élément au-delà de certaines cibles de placement non valides, vous pouvez voir un geste spécial de la souris (une barre oblique inverse dans un cercle), indiquant qu'il ne peut pas être placé. Bien que tous les éléments prennent en charge les événements de cible de suppression, ces éléments ne peuvent pas être supprimés par défaut. Si un élément est glissé au-delà d'un élément dont la suppression n'est pas autorisée, peu importe ce que fait l'utilisateur, l'événement de suppression ne se produira pas. Cependant, vous pouvez faire de n'importe quel élément une cible de dépôt valide en remplaçant le comportement par défaut des événements dragenter et dragover.

Après avoir remplacé le comportement par défaut, vous constaterez que lorsque vous faites glisser l'élément vers la cible de dépôt, le curseur se transforme en un symbole qui permet le placement. Dans Firefox 3.5, le comportement par défaut d'un événement de dépôt consiste à ouvrir l'URL déposée sur la cible de dépôt. Si vous faites glisser une image sur la cible de dépôt, la page sera redirigée vers le fichier image. Si vous faites glisser et déposez du texte sur la cible de dépôt, une erreur d'URL non valide en résultera. Par conséquent, pour que Firefox prenne en charge le glisser-déposer normal, il est nécessaire d'annuler le comportement par défaut de l'événement drop et d'empêcher l'ouverture de l'URL de l'élément glissé. Un petit exemple est le suivant

　Code HTML

<!-- 拖拽”梦龙小站”到”梦龙”地方的小例子 -->
<ul>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
	<li draggable="true">梦龙小站</li>
</ul>
<p id="p1">梦龙</p>

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

　Code JavaScript

window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var op = document.getElementById('p1');
	var iNow = 0;
	
	
	for(var i=0;i<aLi.length;i++){
		aLi[i].ondragstart = function(){ //拖拽前触发
		
			this.style.background = &#39;yellow&#39;;
		
		};
		
		aLi[i].ondragend = function(){  //拖拽结束触发
		
			this.style.background = &#39;&#39;;
		
		};
		
		/*aLi[i].ondrag = function(){ //开始与结束之间，连续触发
			
			document.title = iNow++;
			
		};*/
	}
	
	op.ondragenter = function(){  //相当于onmouseover

		this.style.background = &#39;green&#39;;
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = &#39;red&#39;;
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		document.title = iNow++;
		
	};

	op.ondrop = function(ev){  //释放鼠标的时候触发

		
	
		this.style.background = &#39;red&#39;;	
	
		alert("梦龙小站，鼠标已经释放");

		ev.preventDefault();  //阻止默认事件：防止打开拖拽元素的url
	
	};
	
};

Le ci-dessus est le contenu, pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !