JavaScript: dataTransfer
Das clientseitigedataTransfer-Objekt bietet den Zugriff auf Daten für Drag-And-Drop Operationen.
Eigenschaften 
dropEffect
Die dropEffect-Eigenschaft liest oder schreibt den Typ der Drag-And-Drop Operation sowie damit verbunden den anzuzeigenden Cursor. Als Werte sind copy (Kopieren), link (Link), move (Verschieben) oder none (keine) möglich.
Notation: Objekt.dropEffect
window.event.dataTransfer.dropEffect = 'move';
effectAllowed
Die effectAllowed-Eigenschaft liest oder schreibt mit welchem Typ das Quell-Element der Drag-And-Drop Operation behandelt werden darf. Als Werte stehen folgende Strings zur Verfügung:
- copy - Nur Kopieren ist möglich.
- ink - Nur Link ist möglich.
- move - Nur Verschieben ist möglich.
- copyLink - Link und Kopieren sind möglich.
- copyMove - Kopieren und Verschieben sind möglich.
- linkMove - Link und Verschieben sind möglich.
- all - Alle Operationen sind möglich.
- none - Keine Operation ist möglich.
- uninitialized - Kein Wert wurde gesetzt (Standard).
Notation: Objekt.effectAllowed
window.event.dataTransfer.effectAllowed = 'move';
Bitte beachten Sie, dass diese Eigenschaft möglichst schon bei ondragstart gesetzt werden sollte.
Methoden
clearData
Die clearData-Methode ermöglicht das Leeren des Drag-And-Drop Speichers. Optional kann das Format als String angegeben werden, dessen Daten aus der Zwischenablage entfernt werden sollen. Als Formate stehen folgende zur Verfügung:
| Format | Beschreibung |
|---|---|
| Text | Entfernt Text-Daten. |
| URL | Entfernt URL-Daten. |
| File | Entfernt Datei-Daten. |
| HTML | Entfernt HTML-Daten. |
| Image | Entfernt Bild-Daten. |
Wird kein Format angegeben, werden alle Datenformate entfernt.
Notation: Objekt.clearData(Format)
window.event.dataTransfer.clearData();
getData
Die getData-Methode liest Daten aus dem Drag-And-Drop Speicher und gibt diese aus. Als Parameter wird das Format (als String) der Daten erwartet. Dabei ist entweder Text (Text-Daten) oder URL (URL-Daten) möglich.
Notation: Objekt.getData(Format)
<html><head>
<script type="text/javascript">
<!--
function initi()
{
document.all.meinDiv1.ondragstart = starte;
document.all.meinDiv2.ondragenter = beende;
}
function starte()
{
window.event.dataTransfer.effectAllowed = 'move';
window.event.dataTransfer.dropEffect = 'move';
txt1 = document.all.meinDiv1.innerText;
window.event.dataTransfer.setData('Text',txt1);
}
function beende()
{
txt2 = window.event.dataTransfer.getData('Text');
document.all.meinDiv2.innerText = 'Eingefügter text: '+txt2;
}
//-->
</script>
</head>
<body onload="initi()">
<div style="position:absolute; left:10px; top:10px; <br />
border:1px solid black;" id="meinDiv1"><br />
Markiere mich und ziehe mich in das zweite Feld</div>
<div style="position:absolute; left:100px; top:100px; <br />
width:100px; height:100px; border:1px solid black;" id="meinDiv2"><br />
Hier hin ziehen!</div>
</body>
</html>
setData
Die setData-Methode schreibt Daten in den Drag-And-Drop Speicher. Dazu muss als erster Parameter das Format der Daten angegeben werden. Hier ist Text (Text-Daten) oder URL (URL-Daten) möglich. Als zweiter Parameter wird ein String übergeben, der die entsprechenden Daten enthält.
Notation: Objekt.setData(Format,Daten)
Beispiel siehe getData-Methode.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project