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.
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
6 Tipps gegen E-Mail Betrug

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.
DSL-Symbolbild
Umzug, Ausfall & Co.

Sie wollen Ihren Provider für Internet und Telefon wechseln? Wir verraten, welche Rechte Sie bei Ausfall, Unterbrechung und Umzug haben.
Amazon Neuheiten November - Edge of Tomorrow
Vorschau auf Film- und Serien-Highlights

Amazon Prime Video lockt im November 2017 mit Film-Highlights wie "Edge of Tomorrow" und "La La Land" sowie neuen Folgen von "Vikings".