Combat réel HTML5 et analyse de la traînée native (quatre attributs déplaçables et autres membres)

Attribut déplaçable

Nous avons introduit plusieurs connaissances pertinentes sur le glisser-déposer natif en HTML5 auparavant. Aujourd’hui, je vais vous présenter quelques autres petites choses du glisser-déposer HTML5. Sans plus tarder, jetons un coup d’œil ensemble.

Par défaut, les liens, le texte et les images peuvent être glissés, et vous pouvez les faire glisser sans écrire de code. Si vous souhaitez que d'autres balises d'éléments puissent être déplacées, seul HTML5 peut le faire. HTML5 spécifie l'attribut dragable pour tous les éléments HTML, indiquant si l'élément peut être glissé. L'attribut dragable est automatiquement défini sur true dans les balises de lien et d'image, et la valeur par défaut de l'attribut dragable des autres éléments est false.

Les navigateurs qui prennent en charge l'attribut dragable sont : Firefox 4, Chrome, IE 10 et Safari 5. Opera 11.5 et les versions antérieures ne prennent pas en charge la fonction glisser-déposer HTML5. De plus, pour permettre à Firefox de prendre en charge les propriétés déplaçables, vous devez ajouter un gestionnaire d'événements ondragstart et enregistrer certaines informations dans l'objet dataTransfer. Dans IE 9 et versions antérieures, l'appel de la méthode dragDrop() via le gestionnaire d'événements mousedown rendait n'importe quel élément déplaçable. Dans Safari 4 et les versions antérieures, vous devez en outre définir le style CSS pour l'élément correspondant -khtml-user-drag : L'élément peut être glissé.

HTML5 en faisant glisser d'autres membres

J'ai déjà introduit certaines propriétés de l'objet dataTransfer, mais elles ne sont pas exhaustives. Certaines des méthodes et propriétés ci-dessous sont celles qui ont peut-être été oubliées.

　addElement(element) : Ajoute un élément pour l'opération de glisser. L'ajout de cet élément affecte uniquement les données (c'est-à-dire l'ajout d'un objet qui sert de source de glissement et répond au rappel) et n'affectera pas l'apparence de l'élément de page pendant l'opération de glissement. Au moment de la rédaction de ce blog, seul Firefox 3.5 implémente cette méthode.

ClearData(format) : Effacer les données enregistrées dans un format spécifique. Les navigateurs qui implémentent cette méthode incluent Firefox 3.5, Safari 4, IE et Safari 4.

setDragImge(element, x, y) : Spécifiez une image à afficher sous le curseur lors du glissement. Cette méthode reçoit trois paramètres : l'élément HTML à afficher et les coordonnées x et y du curseur dans l'image. Parmi eux, l'élément HTML peut être une image ou d'autres éléments. S'il s'agit d'une image, l'image sera affichée. S'il s'agit d'un autre élément, l'élément rendu sera affiché. Les navigateurs pris en charge sont : Safari 4, Chrome et Firefox 3.5.

Types : le type de données actuellement enregistré. Il s'agit d'une collection de type tableau qui stocke les types de données sous forme de chaînes telles que « texte ». Les navigateurs pris en charge sont : Chrome, Firefox 3.5 et IE 10.

Maintenant que j'ai acquis quelques connaissances théoriques, voici un petit exemple pour vous aider à comprendre plus profondément.

　Petits exemples d'attributs déplaçables et d'autres membres

　Code HTML

<ul>
	<li draggable="true">a</li>
	<li draggable="true">b</li>
	<li draggable="false">c</li>
</ul>
<a href="http://www.baidu.com/">d</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;;
			
		
		};
		
		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;) );
		alert( ev.dataTransfer.types );
	
	};
	
};

Un petit exemple de glisser le bureau dans la page

　Code HTML

//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的

window.onload = function(){

	var op = document.getElementById('p1');
	
	
	
	
	op.ondragenter = function(){  //相当于onmouseover
		
		this.style.background = 'green';
		
	};
	
	op.ondragleave = function(){  //相当于onmouseout
		
		this.style.background = 'red';
		
	};
	
	op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
		
		ev.preventDefault();  //阻止默认事件：元素就可以释放了
		
		ev.dataTransfer.dropEffect = 'link';  //真对外部文件
		
	};
	
	op.ondrop = function(ev){  //释放鼠标的时候触发
	
		ev.preventDefault();  //阻止默认行为
	
		this.style.background = 'red';	
		
		var oFR = new FileReader();
	
		var list = ev.dataTransfer.files;  //当前拖拽的那个文件(返回的一个文件列表)
		
		//alert(list.length);
		
		//type : 文件类型
		
		//alert(list[0].type);
		
		
		oFR.onload = function(){ //读取完成，触发事件
			
			alert(this.result);  // 读取到的信息
			
		};
		
		oFR.readAsDataURL(list[0]);
	
	};
	
};

　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

<p id="p1">梦龙小站</p>

　Petit exemple de suppression de la corbeille

　Code HTML

<ul>
	<li draggable="true">a</li>
	<li draggable="true">b</li>
	<li draggable="true">c</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; color:white;}

　 Le code JavaScript

//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的

window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	var op = document.getElementById('p1');
	var iNow = 0;
	
	var targetLi = null;
	
	for(var i=0;i<aLi.length;i++){
	
		aLi[i].ondragstart = function(ev){ //拖拽前触发
		
			this.style.background = &#39;yellow&#39;;
			
			ev.dataTransfer.setData(&#39;text&#39;,this.innerHTML);  //存储一个键值对 : value值必须是字符串
			
			targetLi = this;
		
		};
		
		aLi[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();  //阻止默认事件：元素就可以释放了
		
		
	};
	
	op.ondrop = function(ev){  //释放鼠标的时候触发
	
		this.style.background = &#39;red&#39;;	
	
		var oText = ev.dataTransfer.getData(&#39;text&#39;);
	
		if(targetLi){
			targetLi.parentNode.removeChild(targetLi);
			this.innerHTML = &#39;删除的是:&#39;+oText;
		}
	
	};
	
};

Le combat réel HTML5 et l'analyse de la traînée native (quatre attributs déplaçables et autres membres) sont présentés ici, et plus encore. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !