Information Technology Reference
In-Depth Information
Callback-Funktion verwenden wir dann aber nicht
return false
, sondern
evt
.preventDefault()
- die Wirkung ist die gleiche, das
drop
-Event wird ausgelöst.
Damit sind wir bei der letzten Aufgabe der Checkliste angelangt, dem Extrahie-
ren der Daten und Umsetzen der Spiellogik beim
ondrop
-Event. Der Callback-
Funktion
drop()
übergeben wir wieder das
DragEvent
im Argument
event
und
greifen dann mit
getData()
auf die bei
dragstart
gespeicherte ID zu.
var drop = function(evt) {
var id = evt.dataTransfer.getData('text');
var elemQ = questions.namedItem(id);
var elemA = evt.target;
elemA.setAttribute("data-id",id);
elemA.setAttribute("data-bev",elemQ.dataset.bev);
elemA.innerHTML = elemQ.innerHTML;
// weiter in der Spiellogik
};
Mithilfe der ID können wir über
questions.namedItem(id)
direkt auf das Quell-
objekt zugreifen, dessen Einwohnerzahl als
data
-Attribut im Zielobjekt zwi-
schenspeichern und seinen Städtenamen als Beschriftung verwenden. Die
beiden Variablen
elemQ
und
elemA
sind
Shortcuts
für die beiden beteiligten
li
-Elemente. Wir erinnern uns, dass Remy Sharps JavaScript-
shim
für
data
-
Attribute leider nur lesend funktioniert, weshalb wir anstelle des eleganteren
elemA.dataset.id=id
das bestens bekannte
elamA.setAttribute("data-id",id)
zum Speichern der Werte verwenden.
Als Teil der Spiellogik werden an dieser Stelle auch die beiden betroffenen
Schaltflächen deaktiviert, und es wird visuelles Feedback gegeben - beides
über CSS-Klassen, die mit
classList.add()
bequem hinzugefügt werden kön-
nen. Die zusätzlichen Einträge in der Funktion
drop()
sind:
elemQ.classList.add('qInactive');
elemA.classList.add('aInactive');
Die entsprechenden Formate im CSS-Stylesheet lauten:
.qInactive {
pointer-events: none;
color: #AAA;
background-color: #EEE;
border-color: #AAA;
}
.aInactive {
