|
Gemäß dem Standardverhalten kann nur Text in die editierbaren Bereiche einer Seite eingefügt werden. Sie können festlegen, dass ein HTML-Element und die ihm untergeordneten Elemente editierbar sein sollen, indem Sie in das öffnende Tag das Attribut
contenteditable
einfügen. Sie können auch ein ganzes Dokument editierbar machen, indem Sie die Eigenschaft
designMode
des document-Objekts auf
"on"
setzen.
Um auf einer Seite ein alternatives Verhalten für das Hineinziehen zu definieren, verwenden Sie für alle Elemente, die gezogene Daten akzeptieren können, die Ereignisse
dragenter
,
dragover
und
drop
.
Aktivieren des Hineinziehens
Um die Hineinziehbewegung nach eigener Maßgabe zu verarbeiten, müssen Sie zuerst das Standardverhalten deaktivieren. Definieren Sie für alle HTML-Elemente, die Sie als Ablageziele verwenden wollen, Listener für die Ereignisse
dragenter
und
dragover
. Rufen Sie in den Prozeduren für diese Ereignisse die
preventDefault()
-Methode des ausgelösten Ereignisobjekts auf. Durch ein solches Deaktivieren des Standardverhaltens können auch nicht-editierbare Bereich ein abzulegendes Element aufnehmen.
Abrufen der abgelegten Daten
In der Prozedur für das Ereignis
ondrop
können Sie auf die abgelegten Daten zugreifen:
function doDrop(event){
droppedText = event.dataTransfer.getData("text/plain");
}
Lesen Sie mithilfe der Methode
dataTransfer.setData()
Daten in die Zwischenablage ein und übergeben Sie dabei den MIME-Typ des zu lesenden Datenformats. Mithilfe der
types
-Eigenschaft des
dataTransfer
-Objekts können Sie herausfinden, welche Datenformate verfügbar sind. Der
types
-Array enthält den MIME-Typ-String für jedes verfügbare Format.
Wenn Sie das Standardverhalten in dem Ereignis „dragenter“ oder „dragover“ deaktivieren, sind Sie selbst dafür verantwortlich, dass abgelegte Daten an der richtigen Stelle im Dokument platziert werden. Es gibt keine API, um eine Mausposition innerhalb eines Elements in eine Einfügemarke zu konvertieren. Diese Einschränkung macht es mitunter schwierig, Ziehbewegungen für das Einfügen zu implementieren.
|
|
|
