Drag & Drop in HTMLAdobe 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-AktionenDie 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 HTMLIm Initiatorelement, also dort, wo die Ziehaktion beginnt, werden folgende Ereignisse ausgelöst:
Vom Ablageziel werden folgende Ereignisse ausgelöst:
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:
MIME-Typen für HTML-Drag & Drop-AktionenFür das dataTransfer-Objekt eines HTML-Drag & Drop-Ereignisses können folgende MIME-Typen verwendet werden:
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 HTMLDer 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:
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.
|
|
