Browsen mit Pfiff

Teil 6: Ajax Tipps und Tricks

Alle Bilder, Texte und das Layout einer Postkarten- Session speichern Sie in der Datenbank. Um die Postkarte zu gestalten, benutzen Sie das ausgezeichnete Tool wz_dragdrop. js von Walter Zorn: www.walterzorn. de/dragdrop/dragdrop.htm.

Ajax Tipps und Tricks

© Archiv

ajaxWrite: Diese Kunst von http://ajaxwrite.com finden Sie zum Teil im Artikel wieder.

Damit bauen Sie eine erste Version der Applikation zusammen, die noch ohne den Back-Button auskommen muss, aber deren Endprodukt Sie bereits per Link verschicken können.

Sicherheits-AnmerkungStellen Sie sicher, dass Ihr Beispiel nur im Intranet/Internet nur nach einer Authentifizierung aufgerufen werden kann, damit Spammer es nicht misbrauchen.

Die Arbeit wz_dragdrop.js von Walter Zorn erweitern Sie am Ende, oder Sie definieren eine eigene Funktion dieses Namens, die die ursprüngliche leere Funktion überschreibt:

function my_DropFunc() { 
var dropTarget = 
dd.obj.getEltBelow(); 
if(dropTarget != null) { 
dropTarget.addChild(dd.obj); 
} 
NotifyChange(dd.obj.name,dd.obj.x,dd.ob 
j.y,dd.obj.w, 
dd.obj.h,dd.obj.parent.name,dd.obj.z); 
}

Damit wird nach einem Drag&Drop ein Element das Kind eines darunter liegenden Objekts Das heißt, mindestens zu 50 Prozent übereinander liegende Bilder kleben danach zusammen. Wenn Sie hingegen nur sicherstellen wollen, dass ein Objekt, das in die Postkarte verschoben wurde, nun auch ein Kind der Postkarte wird, dann benutzen Sie die alternative my_DropFunc():

function my_DropFunc() { 
var pk = dd.elements.postkarte; 
if ((dd.obj.x >= pk.x && dd.obj.x <= 
(pk.x + pk.w)) 
|| ((dd.obj.x + dd.obj.w) >= pk.x &&
(dd.obj.x + dd.obj.w) <= (pk.x + 
pk.w))) { 
pk.addChild(dd.obj); 
} else { 
dd.elements.toolbox.addChild(dd.obj); } 
NotifyChange(dd.obj.name,dd.obj.x,dd.ob 
j.y,dd.obj.w, 
dd.obj.h,dd.obj.parent.name,dd.obj.z); 
} 
}

Leider funktioniert Walter Zorns dragdrop.js mit Texten nicht so gut wie mit Bildern. Das berührt allerdings Ihre AJAX-Programmierung nicht. Das Drag&Drop-Beispiel veranschaulicht die Schwierigkeiten. Sie rufen bei jeder Änderung eines Objekts die eigene Routine NotifyChange() auf, die den neuen Zustand des Objekts per AJAX auf dem Webserver speichert. Hierfür benutzen Sie Routinen aus der Toolbox prototype.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".