Information Technology Reference
In-Depth Information
Drag&Drop-Operation sind kein Selbstzweck, sondern verfolgen auch ein Ziel:
Bestimmte Informationen sollen von einem Ort zum anderen transferiert wer-
den. Welche Informationen das sind, muss beim Start der jeweiligen
Drag
-
Operation festgelegt werden, weshalb wir jedem Listeneintrag unserer Städte-
liste einen
dragstart
-Event-Handler hinzufügen. Er ruft die Callback-Funktion
startDrag()
auf und übergibt ihr im Argument
event
das sogenannte
DragEvent
gleich mit:
<li id=be draggable=true
ondragstart="startDrag(event)">Brüssel</li>
Dieses
DragEvent
spielt eine zentrale Rolle bei Drag&Drop, erschließt es
doch über sein
readonly
-Attribut
dataTransfer
das
DataTransfer
-Interface der
Drag&Drop-API, in dem alle nötigen Methoden und Attribute für Drag&Drop
verfügbar sind. Eine Methode davon ist
setData(format, data)
. Sie legt fest,
welche Daten beim Ziehen von A nach B im Hintergrund quasi mitgezogen wer-
den sollen. In unserem Fall ist es die ID im Format
text
. Über sie werden wir
später auf die Ausgangsdaten zugreifen können.
var dragStart = function(evt) {
evt.dataTransfer.setData('text',evt.target.id);
};
Ab diesem Zeitpunkt kann der Listeneintrag gezogen werden - offen bleibt al-
lerdings, wo wir ihn ablegen werden. Es wäre hilfreich, wenn analog zum
drag-
gable
-Attribut auch ein
droppable
-Attribut verfügbar wäre - leider ist dem aber
nicht so, weshalb wir zum erfolgreichen Ablegen nicht weniger als drei Events
benötigen:
dragenter
,
dragover
und
drop
. Zwei davon müssen seltsamerweise
abgebrochen werden, damit das dritte und wichtigste Event auch tatsächlich
ausgelöst wird. Der HTML-Code für einen der Listeneinträge im linken Bereich
des Spiels, in dem die Städte gereiht werden, verrät, welche es sind:
<li ondragenter="return false;"
ondragover="return false;"
ondrop="drop(event)">❶</li>
Die beiden Events
dragenter
und
dragover
existieren also hauptsächlich dazu,
um Folgendes zu signalisieren:
An dieser Stelle darf abgelegt werden!
In unse-
rem Fall erfolgt der Abbruch mit
return false
sofort. Würden wir zwei Call-
back-Funktionen verwenden, könnten wir noch zusätzliches User-Feedback
geben, wie zum Beispiel:
Hier können Sie ablegen!
bei
dragenter
oder
Sind Sie
sich sicher, dass das stimmt?
bei
dragover
. Zum Abbrechen des Events in der
