[Einführung] 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.
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. In einem Ereignishandler 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 in Textform 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 Sie nicht nur Daten übertragen, sondern auch das gezogene Element durch dataTransfer bestimmen Objekt und welche Operationen das Drop-Zielelement empfangen kann. Um eine solche Funktion zu erreichen, werden die Attribute dropEffect und effectAllowed verwendet.
dropEffect-Attribut
Unter anderem kann das dropEffect-Attribut verwendet werden, um zu ermitteln, welche Art von 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 soll 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 wirksam. Es kann nur wirksam sein, wenn es in Verbindung mit dem Attribut effectAllowed 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:
Nicht initialisiert: Für das gezogene Element ist kein Platzierungsverhalten festgelegt.
Keine: Das gezogene Element kann kein Verhalten haben.
Kopieren: 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 erlaubt.
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
[html] view plaincopyprint?
<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
[css] view plaincopyprint?
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
[javascript] view plaincopyprint?
//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 = 'yellow';
ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串
ev.dataTransfer.effectAllowed = 'all';
ev.dataTransfer.setDragImage(this,0,0);
};
aLi[i].ondragend = function(){ //拖拽结束触发
this.style.background = '';
};
}
for(var i=0;i<aA.length;i++){
aA[i].ondragstart = function(ev){ //拖拽前触发
this.style.background = 'yellow';
ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串
ev.dataTransfer.effectAllowed = 'link';
ev.dataTransfer.setDragImage(this,0,0);
};
aA[i].ondragend = function(){ //拖拽结束触发
this.style.background = '';
};
}
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){ //释放鼠标的时候触发
this.style.background = 'red';
alert( ev.dataTransfer.getData('a') );
};
};Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonHTML5-Erklärung des dataTransfer-Objekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
