Combat réel HTML5 et analyse du glisser-déposer natif (trois objets dataTransfer)

Transmission de données par glisser-déposer HTML5

Bien que le glisser-déposer natif soit implémenté via les événements dragstart, drag et dragend. Mais il ne s'agit que d'un simple glisser-déposer. Il existe encore des problèmes de glisser-déposer dans IE6 et IE7, et l'échange de données n'est pas implémenté. Afin de réaliser l'échange de données, IE5 a introduit l'objet dataTransfer. L'objet dataTransfer est une propriété de l'objet événement, utilisée pour transférer des données au format chaîne de l'élément glissé vers la cible de dépôt. Puisqu'il s'agit d'une propriété de l'objet événement, l'objet dataTransfer n'est accessible que dans le gestionnaire d'événements de l'événement glisser-déposer. Dans le gestionnaire d'événements, vous pouvez utiliser les propriétés et méthodes de cet objet pour compléter la fonctionnalité glisser-déposer.

L'objet dataTransfer a deux méthodes principales : la méthode getData() et la méthode setData(). À partir des significations littérales en anglais de ces deux méthodes, vous pouvez approximativement deviner leurs utilisations. La méthode getData() peut obtenir la valeur enregistrée par la méthode setData(). Le premier paramètre de la méthode setData(), qui est également le seul paramètre de la méthode getData(), est une chaîne utilisée pour enregistrer le type de données et la valeur est « texte » ou « URL ».

IE ne définit que deux types de données valides : "texte" ou "URL", tandis que HTML5 l'étend pour permettre de spécifier différents types MIME. Pour des raisons de compatibilité ascendante, HTML5 prend également en charge « texte » ou « URL », mais ces deux types seront mappés à « texte/plain » ou « texte/url-list ».

En fait, l'objet dataTransfer peut enregistrer une valeur pour chaque type MIME. En d’autres termes, il n’y aura aucun autre problème lorsque des collègues enregistreront un morceau de texte et une URL dans cet objet. Cependant, les données stockées dans l'objet dataTransfer ne peuvent être lues que dans le gestionnaire d'événements drop. Si les données ne sont pas lues dans le gestionnaire ondrop, l'objet dataTransfer a été détruit et les données sont perdues.

Lorsque vous faites glisser le texte dans la zone de texte, le navigateur appellera la méthode setData() pour enregistrer le texte glissé dans l'objet dataTransfer au format "texte". De même, lors du glisser-déposer d'un lien ou d'une image, la méthode setData() est appelée et l'URL est enregistrée. Ensuite, lorsque ces éléments sont glissés et déposés dans la cible de dépôt, les données peuvent être lues via la méthode getData(). Bien entendu, en tant que développeur, vous pouvez également enregistrer manuellement les données que vous souhaitez transférer en appelant setData() dans le gestionnaire d'événements dragstart pour une utilisation ultérieure.

Il y a une différence entre enregistrer des données sous forme de texte et les enregistrer sous forme d'URL. Si vous enregistrez les données au format texte, les données ne reçoivent aucun traitement particulier. S'il est enregistré au format URL, le navigateur le traitera comme un lien dans la page Web. Si vous placez cette URL dans une autre fenêtre de navigateur, vous pouvez ouvrir l'URL.

Firefox 5 et les versions antérieures ne peuvent pas mapper "url" et "text" à "" et "text/plain". Mais il peut mapper « Texte » (T majuscule) à « texte/plain ». Afin de mieux obtenir les données de l'objet dataTransfer dans une situation multi-navigateur, il est préférable de détecter deux valeurs lors de l'obtention des données URL et d'utiliser "Texte" lors de l'obtention de données texte.

Remarque : assurez-vous de mettre le type de données court en premier, car IE10 et les versions précédentes ne prennent toujours pas en charge les noms de types MIME étendus et signaleront une erreur lorsqu'ils rencontreront des types de données non reconnus. Cependant, la valeur « texte » ou « URL » n'est obligatoire que pour IE. La définition de chaînes avec toute autre valeur dans Firefox 3.6, Chrome et Opera peut également être exécutée normalement.

　attribut dropEffect et attribut effectAllowed

L'utilisation de l'objet dataTransfer peut non seulement transférer des données, mais également déterminer quelles opérations l'élément déplacé et l'élément en tant que cible de placement peuvent recevoir via l'objet dataTransfer. Pour réaliser une telle fonction, l'attribut dropEffect et l'attribut effectAllowed sont utilisés.

Attribut dropEffect

Parmi eux, grâce à l'attribut dropEffect, vous pouvez savoir quel type de comportement l'élément déplacé peut effectuer. Les quatre valeurs​​de cet attribut sont les suivantes :

　aucun : L'élément glissé ne peut pas être placé ici. Il s'agit de la valeur par défaut pour tous les éléments à l'exception des zones de texte.

　move : L'élément déplacé doit être déplacé vers la cible de dépôt.

　copie : L'élément déplacé doit être copié vers la cible de dépôt.

　lien : Placer la cible ouvrira l'élément déplacé (mais l'élément déplacé doit être un lien avec une adresse URL).

Lorsque vous faites glisser un élément sur la cible de dépôt, chacune des valeurs ci-dessus entraînera l'affichage du curseur sous la forme d'un symbole différent.

L'attribut effectAllowed

L'attribut dropEffect seul n'est pas utile. Il ne peut être efficace que lorsqu'il est utilisé conjointement avec l'attribut effectAllowed. L'attribut effectAllowed indique quel comportement de déplacement d'éléments est autorisé (dropEffect). L'attribut effectAllowed a également de nombreuses valeurs, et ses valeurs sont les suivantes :

　non initialisé : aucun comportement de placement n'est défini pour l'élément déplacé.

　aucun : L'élément déplacé ne peut avoir aucun comportement.

　copy : Seul dropEffect avec la valeur "copy" est autorisé.

　link : Seul dropEffect avec la valeur "link" est autorisé.

　move : Seul dropEffect avec la valeur "move" est autorisé.

　copyLink : autorise dropEffect avec les valeurs "copy" et "link".

　copyMove : autorise dropEffect avec les valeurs "copy" et "move".

　linkMove : Permet dropEffect avec les valeurs "link" et "move".

　tous : Autoriser n'importe quel dropEffect.

Pour définir l'attribut effectAllowed, il doit être défini dans le gestionnaire d'événements ondragstart. Un petit exemple est le suivant

　Code HTML

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

　 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

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

Le ci-dessus, HTML5 en action et analyse du contenu du glisser-déposer natif (trois objets dataTransfer). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !