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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Automobilclub

Wer seine ADAC-Mitgliedschaft kündigen möchte, bekommt hier aktuelle Tipps. Wir zeigen Ihnen, wie das online per Formular oder E-Mail möglich ist.
Kosten, Apps, Kündigung und Co.

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Für Android, iPhone, iPad & Co.

Es gibt keine Whatsapp-Alternative? Quatsch! Diese Messenger-Apps für Android, iOS und PC sind der perfekte Ersatz.
Sicherheit

Betrüger versenden E-Mails, die es auf Ihre Daten und Ihr Geld abgesehen haben. Wie Sie Phishing-E-Mails erkennen und sich schützen.
Gefälschte Facebook-Konten

Betrüger nutzen gefälschte Facebook-Profile, um Geld zu ergaunern. Wir zeigen, wie Sie sich und auch Ihre Facebook-Kontakte gegen die Betrugsmasche…