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

Facebook Alternative
Social Networks

Sind Sie auf der Suche nach einer Facebook-Alternative? Hier finden Sie unsere Empfehlungen für die besten Social Networks: natürlich ohne Facebook.
Netflix
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.
Whatsapp auf PC
Mit oder ohne Download

Mit Whatsapp Web oder der Whatsapp Desktop-App nutzen Sie den Messenger bequem am PC. Wir erklären Download, Installation und Einrichtung.
Spam-Mails
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.
Facebook-Betrug mit Fake-Profilen
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…