info@a-coding-project.de

JavaScript: dataTransfer

Das clientseitige dataTransfer-Objekt bietet den Zugriff auf Daten für Drag-And-Drop Operationen.

Eigenschaften  nach oben

JScript 5.0 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';

JScript 5.0 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  nach oben

JScript 5.0 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:

FormatBeschreibung
TextEntfernt Text-Daten.
URLEntfernt URL-Daten.
FileEntfernt Datei-Daten.
HTMLEntfernt HTML-Daten.
ImageEntfernt Bild-Daten.

Wird kein Format angegeben, werden alle Datenformate entfernt.
Notation: Objekt.clearData(Format)

window.event.dataTransfer.clearData();

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

JScript 5.0 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.

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant