Drag & Drop in HTML

Adobe AIR 1.0 und höher

Um Daten in eine HTML-gestützte Anwendung zu ziehen oder aus einer HTML-Anwendung herauszuziehen (oder in den HTML-Code eines HTML-Loaders zu ziehen oder aus dem HTML-Loader herauszuziehen), gibt es spezielle HTML-Drag & Drop-Ereignisse. Die HTML-Drag & Drop-API ermöglicht es Ihnen, Drag & Drop-Aktionen in und aus DOM-Elementen im HTML-Inhalt durchzuführen.

Hinweis: Sie können auch die AIR-APIs „NativeDragEvent“ und „NativeDragManager“ verwenden. Dazu definieren Sie einen Listener für Ereignisse des HTMLLoader-Objekts, das den HTML-Inhalt enthält. Allerdings ist die HTML-API besser in das HTML-DOM integriert und bietet Ihnen Möglichkeiten zur Steuerung von Standardverhalten.

Standardverhalten bei Drag & Drop-Aktionen

Die HTML-Umgebung stellt das Standardverhalten für Drag & Drop-Bewegungen, einschließlich Text, Bildern und URLs, zur Verfügung. Wenn Sie das Standardverhalten verwenden, können Sie Daten mit diesen Datentypen immer aus einem Element herausziehen. Sie können allerdings nur Text in ein Element ziehen und nur unter der Voraussetzung, das Element befindet sich in einem editierbaren Bereich einer Seite. Wenn Sie Text innerhalb eines editierbaren Bereichs einer Seite oder auch in einen anderen editierbaren Bereich derselben Seite ziehen, wird als Standardverhalten eine Verschiebaktion durchgeführt. Wenn Sie Text von einem nicht editierbaren Bereich oder von außerhalb der Anwendung in einen editierbaren Bereich ziehen, wird als Standardverhalten eine Kopieraktion durchgeführt.

Sie können das Standardverhalten überschreiben, indem Sie die Drag & Drop-Ereignisse selbst definieren. Um das Standardverhalten zu deaktivieren, rufen Sie die preventDefault() -Methode der Objekte auf, die für die Drag & Drop-Ereignisse ausgelöst wurden. Anschließend können Sie nach Bedarf Daten in das Ablageziel einfügen oder Daten aus der Ziehquelle entfernen.

Standardmäßig kann der Benutzer jeglichen Text sowie Bilder und Links auswählen und ziehen. Mithilfe der WebKit-CSS-Eigenschaft -webkit-user-select können Sie steuern, wie ein HTML-Element ausgewählt werden kann. Wenn Sie zum Beispiel -webkit-user-select auf none setzen, ist der Elementinhalt nicht auswählbar und kann somit auch nicht gezogen werden. Und mithilfe der CSS-Eigenschaft -webkit-user-drag können Sie festlegen, ob ein Element als Ganzes gezogen werden kann. Allerdings wird der Inhalt des Elements dann gesondert verarbeitet. Der Benutzer könnte dann nach wie vor ausgewählte Textpassagen ziehen. Weitere Informationen finden Sie unter CSS in AIR .

Drag & Drop-Ereignisse in HTML

Im Initiatorelement, also dort, wo die Ziehaktion beginnt, werden folgende Ereignisse ausgelöst:

Ereignis

Beschreibung

dragstart

Wird ausgelöst, wenn der Benutzer eine Ziehbewegung beginnt. Die Ereignisprozedur für dieses Ereignis kann das Ziehen verhindern, falls notwendig, indem sie die preventDefault()-Methode des Ereignisobjekts aufruft. Um zu steuern, ob die zu ziehenden Daten kopiert, verschoben oder verknüpft werden sollen, setzen Sie die Eigenschaft „effectAllowed“. Ausgewählter Text, Bilder und Links werden gemäß dem Standardverhalten in die Zwischenablage gelegt, Sie können aber mithilfe der dataTransfer-Eigenschaft des Ereignisobjekts andere Daten für die Ziehbewegung festlegen.

drag

Wird während der Ziehbewegung kontinuierlich ausgelöst.

dragend

Wird ausgelöst, wenn der Benutzer die Maustaste loslässt, um die Ziehbewegung zu beenden.

Vom Ablageziel werden folgende Ereignisse ausgelöst:

Ereignis

Beschreibung

dragover

Wird kontinuierlich ausgelöst, solange die Ziehbewegung innerhalb der Elementgrenzen bleibt. Die Prozedur für dieses Ereignis sollte die Eigenschaft „dataTransfer.dropEffect“ setzen, um festzulegen, ob nach dem Loslassen der Maus eine Kopier-, Verschieb- oder Verknüpfaktion ausgeführt wird.

dragenter

Wird ausgelöst, wenn eine Ziehbewegung über die Begrenzung eines Elements geführt wird.

Wenn Sie in einer dragenter-Ereignisprozedur Eigenschaften des Objekts „dataTransfer“ ändern, werden diese Änderungen bald darauf von dem nächsten dragover-Ereignis überschrieben. Andererseits gibt es zwischen einem dragenter- und dem ersten dragover-Ereignis eine kurze Verzögerung. Dies kann zur Folge haben, dass der Cursor aufblinkt, wenn verschiedene Eigenschaften gesetzt wurden. In vielen Fällen können Sie für beide Ereignisse dieselbe Ereignisprozedur verwenden.

dragleave

Wird ausgelöst, wenn die Ziehbewegung die Elementgrenzen verlässt.

drop

Wird ausgelöst, wenn der Benutzer die Daten auf dem Element ablegt. Auf die gezogenen Daten kann nur innerhalb der Prozedur für dieses Ereignis zugegriffen werden.

Das als Reaktion auf diese Ereignisse ausgelöste Ereignisobjekt ähnelt einem Mausereignis. Sie können mithilfe von Mausereigniseigenschaften wie ( clientX , clientY ) und ( screenX , screenY ) die Mausposition bestimmen.

Die wichtigste Eigenschaft eines Ziehereignisobjekts ist dataTransfer , das die gezogenen Daten enthält. Das dataTransfer -Objekt selbst verfügt über folgende Eigenschaften und Methoden:

Eigenschaft oder Methode

Beschreibung

effectAllowed

Der von der Quelle des Ziehvorgangs zugelassene Effekt. Typischerweise setzt die Prozedur für das dragstart-Ereignis diesen Wert. (Siehe Zieheffekte in HTML .)

dropEffect

Der vom Ziel oder Benutzer gewählte Effekt. Wenn Sie den Ablegeffekt ( dropEffect ) in einer dragover - oder dragenter -Ereignisprozedur setzen, aktualisiert AIR den Mauscursor. Dadurch zeigt der Curser immmer den Effekt an, der beim Loslassen der Maustaste eintritt. Wenn der eingestellte dropEffect keinem der zulässigen Effekte entspricht, kann das Element nicht abgelegt werden und der Nicht-verfügbar- Cursor wird angezeigt. Wenn Sie keinen dropEffect als Reaktion auf das letzte dragover - oder dragenter -Ereignis gesetzt haben, kann der Benutzer mithilfe der Standardzusatztasten des jeweiligen Betriebssystems aus den zulässigen Effekten einen auswählen.

Der Abschlusseffekt wird von der dropEffect -Eigenschaft des Objekts gemeldet, das für dragend ausgelöst wurde. Wenn der Benutzer den Ablegvorgang abbricht, indem er die Maustaste außerhalb eines zulässigen Ziels loslässt, wird dropEffect auf den Wert none gesetzt.

types

Ein Array mit den MIME-Typen aller gegenwärtigen Datenformate im Objekt dataTransfer .

getData(mimeType)

Ruft die Daten in dem vom mimeType -Parameter angegebenen Format ab.

Die Methode getData() kann nur als Reaktion auf das Ereignis drop aufgerufen werden.

setData(mimeType)

Fügt die Daten in dem vom mimeType -Parameter angegebenen Format in das dataTransfer-Objekt ein. Sie können Daten in mehreren Formaten einbinden, indem Sie setData() für jeden MIME-Typ aufrufen. Daten, die vom Standardziehverhalten in das Objekt dataTransfer eingefügt wurden, werden gelöscht.

Die Methode setData() kann nur als Reaktion auf das Ereignis dragstart aufgerufen werden.

clearData(mimeType)

Löscht alle Daten in dem vom mimeType -Parameter angegebenen Format ab.

setDragImage(image, offsetX, offsetY)

Definiert ein benutzerdefiniertes Ziehbild. Die setDragImage() -Methode kann nur in Reaktion auf das dragstart-Ereignis aufgerufen werden und nur, wenn ein gesamtes HTML-Element gezogen wird, indem sein -webkit-user-drag -CSS-Stil auf element gesetzt wird. Der image -Parameter kann ein JavaScript-Element oder Image-Objekt sein.

MIME-Typen für HTML-Drag & Drop-Aktionen

Für das dataTransfer -Objekt eines HTML-Drag & Drop-Ereignisses können folgende MIME-Typen verwendet werden:

Datenformat

MIME-Typ

Text

"text/plain"

HTML

"text/html"

URL

"text/uri-list"

Bitmap

"image/x-vnd.adobe.air.bitmap"

File list

"application/x-vnd.adobe.air.file-list"

Sie können auch andere MIME-Strings verwenden, auch von der Anwendung definierte Strings. Es ist jedoch möglich, dass andere Anwendungen die übertragenen Daten dann nicht erkennen oder verarbeiten können. Es liegt in Ihrer Verantwortung, Daten im erwarteten Format in das dataTransfer -Objekt einzufügen.

Wichtig: Nur Code, der in der Anwendungs-Sandbox ausgeführt wird, kann auf abgelegte Dateien zugreifen. Der Versuch, Eigenschaften eines File-Objekts innerhalb einer anwendungsfremden Sandbox zu lesen oder zu setzen, erzeugt einen Sicherheitsfehler. Weitere Informationen finden Sie unter Abgelegte Dateien in anwendungsfremden HTML-Sandboxen .

Zieheffekte in HTML

Der Initiator der Ziehbewegung kann die zugelassenen Zieheffekte einschränken, indem er die Eigenschaft dataTransfer.effectAllowed in der Prozedur für das dragstart -Ereignis setzt. Es können die folgenden Stringwerte verwendet werden:

Stringwert

Beschreibung

"none"

Es sind keine Ziehoperationen zugelassen.

"copy"

Die Daten werden in das Ziel kopiert, bleiben aber auch am Herkunftsort erhalten.

"link"

Die Daten werden gemeinsam mit dem Ziel genutzt, indem eine Verknüpfung zum Herkunftsort erstellt wird.

"move”

Die Daten werden vom Herkunftsort entfernt und in das Ziel kopiert.

"copyLink"

Die Daten können kopiert oder verknüpft werden.

"copyMove"

Die Daten können kopiert oder verschoben werden.

"linkMove"

Die Daten können verknüpft oder verschoben werden.

"all"

Die Daten können kopiert, verschoben oder verknüpft werden. all ist der Standardeffekt, wenn Sie das Standardverhalten deaktiviert haben.

Vom Ziel der Ziehbewegung kann in der Eigenschaft dataTransfer.dropEffect festgelegt werden, welche Aktion durchgeführt wird, wenn der Benutzer den Ablegvorgang abschließt. Ist der Ablegeffekt eine der zulässigen Aktionen, zeigt das System den entsprechenden Kopier-, Verschieb- oder Verknüpfcursor an. Andernfalls zeigt das System den Nicht-verfügbar- Cursor an. Wenn vom Ziel kein Ablegeffekt eingestellt wurde, kann der Benutzer mithilfe der Zusatztasten aus den zulässigen Aktionen einen Effekt auswählen.

Den dropEffect -Wert legen Sie in den Prozeduren für die Ereignisse dragover und dragenter fest: 

function doDragStart(event) { 
    event.dataTransfer.setData("text/plain","Text to drag"); 
    event.dataTransfer.effectAllowed = "copyMove"; 
} 
 
function doDragOver(event) { 
    event.dataTransfer.dropEffect = "copy"; 
} 
 
function doDragEnter(event) { 
    event.dataTransfer.dropEffect = "copy"; 
}
Hinweis: Obwohl Sie die Eigenschaft dropEffect in der Prozedur für dragenter immer einstellen sollten, müssen Sie sich im Klaren darüber sein, dass das nächste dragover -Ereignis die Eigenschaft auf ihren Standardwert zurücksetzt. Legen Sie daher als Reaktion auf beide Ereignisse einen dropEffect -Wert fest.