Heim > Web-Frontend > H5-Tutorial > Hauptteil

Tatsächlicher HTML5-Kampf und Analyse von nativem Drag & Drop (drei dataTransfer-Objekte)

黄舟
Freigeben: 2017-02-11 11:44:42
Original
1489 Leute haben es durchsucht


HTML5-Drag-and-Drop-Datenübertragung

Obwohl natives Drag-and-Drop durch Dragstart-, Drag- und Dragend-Ereignisse implementiert wird. Dies ist jedoch nur Drag & Drop. In IE6 und IE7 gibt es immer noch einige Drag & Drop-Probleme, und der Datenaustausch ist nicht implementiert. Um den Datenaustausch zu realisieren, hat IE5 das dataTransfer-Objekt eingeführt. Das dataTransfer-Objekt ist eine Eigenschaft des Ereignisobjekts und wird zum Übertragen von Daten im String-Format vom gezogenen Element zum Drop-Ziel verwendet. Da es sich um eine Eigenschaft des Ereignisobjekts handelt, kann auf das dataTransfer-Objekt nur innerhalb des Ereignishandlers des Drag-and-Drop-Ereignisses zugegriffen werden. Im Event-Handler können Sie die Eigenschaften und Methoden dieses Objekts verwenden, um die Drag-and-Drop-Funktionalität zu vervollständigen.

Das dataTransfer-Objekt verfügt über zwei Hauptmethoden: die Methode getData() und die Methode setData(). Anhand der englischen wörtlichen Bedeutung dieser beiden Methoden können Sie ihre Verwendung grob erraten. Die Methode getData() kann den von der Methode setData() gespeicherten Wert abrufen. Der erste Parameter der setData()-Methode, der auch der einzige Parameter der getData()-Methode ist, ist eine Zeichenfolge, die zum Speichern des Datentyps verwendet wird, und der Wert ist „Text“ oder „URL“.

IE definiert nur zwei gültige Datentypen: „Text“ oder „URL“, während HTML5 dies erweitert, um die Angabe verschiedener MIME-Typen zu ermöglichen. Aus Gründen der Abwärtskompatibilität unterstützt HTML5 auch „text“ oder „URL“, diese beiden Typen werden jedoch „text/plain“ oder „text/url-list“ zugeordnet.

Tatsächlich kann das dataTransfer-Objekt einen Wert für jeden MIME-Typ speichern. Mit anderen Worten: Es wird keine weiteren Probleme geben, wenn Kollegen einen Text und eine URL in diesem Objekt speichern. Die im dataTransfer-Objekt gespeicherten Daten können jedoch nur im Drop-Event-Handler gelesen werden. Wenn die Daten nicht im Ondrop-Handler gelesen werden, wurde das dataTransfer-Objekt zerstört und die Daten gehen verloren.

Beim Ziehen des Texts im Textfeld ruft der Browser die Methode setData() auf und speichert den gezogenen Text im dataTransfer-Objekt im Format „Text“. Ebenso wird beim Ziehen und Ablegen eines Links oder Bildes die Methode setData() aufgerufen und die URL gespeichert. Wenn diese Elemente dann per Drag & Drop in das Ablageziel gezogen werden, können die Daten über die Methode getData() gelesen werden. Natürlich können Sie als Entwickler die Daten, die Sie übertragen möchten, auch manuell speichern, indem Sie setData() im Dragstart-Ereignishandler aufrufen, um sie für die zukünftige Verwendung zu speichern.

Es gibt einen Unterschied zwischen dem Speichern von Daten als Text und dem Speichern als URL. Wenn Sie die Daten im Textformat speichern, erfahren die Daten keine Sonderbehandlung. Wenn es im URL-Format gespeichert wird, behandelt der Browser es als Link auf der Webseite. Wenn Sie diese URL in einem anderen Browserfenster platzieren, können Sie die URL öffnen.

Firefox 5 und frühere Versionen können „url“ und „text“ nicht zu „“ und „text/plain“ zuordnen. Aber es kann „Text“ (Großbuchstabe T) auf „text/plain“ abbilden. Um in einer browserübergreifenden Situation besser Daten aus dem dataTransfer-Objekt abzurufen, ist es am besten, beim Abrufen von URL-Daten zwei Werte zu erkennen und beim Abrufen von Textdaten „Text“ zu verwenden.

Beachten Sie, dass Sie unbedingt den kurzen Datentyp an die erste Stelle setzen müssen, da IE10 und frühere Versionen immer noch keine erweiterten MIME-Typnamen unterstützen und einen Fehler melden, wenn sie auf nicht erkannte Datentypen stoßen. Der Wert „text“ oder „URL“ ist jedoch nur für den IE obligatorisch. Das Festlegen von Zeichenfolgen mit jedem anderen Wert in Firefox 3.6+, Chrome und Opera kann auch normal ausgeführt werden.

 dropEffect-Attribut und effectAllowed-Attribut

Mit dem dataTransfer-Objekt können nicht nur Daten übertragen, sondern auch bestimmt werden, welche Operationen das gezogene Element und das Element als Platzierungsziel über das dataTransfer-Objekt empfangen können. Um eine solche Funktion zu erreichen, werden die Attribute dropEffect und effectAllowed verwendet.

dropEffect-Attribut

Unter anderem können Sie über das dropEffect-Attribut erkennen, welches Verhalten das gezogene Element ausführen kann. Die vier Werte dieses Attributs lauten wie folgt:

 none: Das gezogene Element kann hier nicht platziert werden. Dies ist der Standardwert für alle Elemente außer Textfeldern.

 verschieben: Das gezogene Element sollte zum Ablageziel verschoben werden.

 Kopieren: Das gezogene Element sollte zum Ablageziel kopiert werden.

 Link: Durch Platzieren des Ziels wird das gezogene Element geöffnet (das gezogene Element muss jedoch ein Link mit einer URL-Adresse sein).

Beim Ziehen eines Elements auf das Ablageziel führt jeder der oben genannten Werte dazu, dass der Cursor als anderes Symbol angezeigt wird.

Das effectAllowed-Attribut

Das dropEffect-Attribut allein ist nicht sinnvoll. Es kann nur wirksam sein, wenn es in Verbindung mit dem effectAllowed-Attribut verwendet wird. Das Attribut effectAllowed gibt an, welches Verhalten beim Ziehen von Elementen zulässig ist (dropEffect). Das Attribut „effectAllowed“ hat ebenfalls viele Werte und seine Werte lauten wie folgt:

 uninitialisiert: Für das gezogene Element ist kein Platzierungsverhalten festgelegt.

 none: Das gezogene Element kann kein Verhalten haben.

 copy: Nur dropEffect mit dem Wert „copy“ ist zulässig.

 link: Nur dropEffect mit dem Wert „link“ ist zulässig.

 move: Nur dropEffect mit dem Wert „move“ ist zulässig.

 copyLink: Ermöglicht dropEffect mit den Werten „copy“ und „link“.

 copyMove: Ermöglicht dropEffect mit den Werten „copy“ und „move“.

 linkMove: Ermöglicht dropEffect mit den Werten „link“ und „move“.

 alle: Beliebigen DropEffect zulassen.

Um das effectAllowed-Attribut festzulegen, muss es im ondragstart-Ereignishandler festgelegt werden. Ein kleines Beispiel ist wie folgt

 HTML-Code

<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>
Nach dem Login kopieren

  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;}
Nach dem Login kopieren

 JavaScript-Code

//dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的
//拖动不带链接的li,会起作用但不跳转链接
//拖动带连接的a,会起作用也跳转

window.onload = function(){
	var aLi = document.getElementsByTagName(&#39;li&#39;);
	var aA = document.getElementsByTagName(&#39;a&#39;);
	var op = document.getElementById(&#39;p1&#39;);
	
	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;) );
	
	};
	
};
Nach dem Login kopieren

Der Oben sehen Sie HTML5 in Aktion und analysieren den Inhalt von nativem Drag & Drop (drei dataTransfer-Objekte). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).





Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!