nicht angemeldet
Auswertung eines Drag-and-Drop-Formulars
Hallo,
ich bin auf der Suche nach einer Möglichkeit, ein Formular um Drag-and-Drop Features zu erweitern. Als Grundlage dient zur Zeit der Mootools-Einkaufswagen (http://demos.mootools.net/Drag.Cart).
Die ausgewählten Items könnten vielleicht über ein verstecktes Input-Feld oder einen Cookie weitergegeben werden, allerdings scheitere ich daran die Daten/Variablen aus den entsprechenden Javascript-Events per PHP an eine Datenbank/Formmailer zu übergeben.
Hat jemand so etwas realisiert oder eine Anlaufstelle?
Vielen Dank!
-
Hallo,
der JS-Code des Beispiels ist eigentlich selbsterklärend. Es gibt einen Drop-Handler, in den du eine eigene Funktion aufrufen kannst, die irgendwo versteckte Formularfelder einfügt - das machst du mit createElement, appendChild und anderen Standard-DOM-Funktionen - oder in ein einziges verstecktes Formularfeld Werte reinschreibt - das solltest du auch http://de.selfhtml.org/javascript/objekte/elements.htm@title=hinbekommen.
Davon abgesehen möchte ich dir, auch wenn ich deinen konkreten Anwendungsfall nicht kenne, dringend davon abraten, solche unnützen JavaScript-Spielerien für wichtige Funktionen zu verwenden. Drop und Drop ist schwierig, unhandlich und unzugänglich. Wenn du ein Element einer Liste hinzufügen willst, nimm eine schnöde Schaltfläche. Das geht viel schneller, es ist Tastatur-navigierbar, du kannst in der Liste wieder Remove-Buttons haben und so weiter.
Das Mootools-Beispiel ist m.M.n. ein Beispiel für enorm unsinniges JavaScript. Webshops, auch solche mit starkem JavaScript-Einsatz, verwenden einfache Schaltflächen, um etwas in den Einkaufswagen zu legen. Das ist bewährt und dabei sollte es auch bleiben. Ich brauche nicht bei jedem »hinzufügen« ein Drag und Drop.
Mathias
-
Erstmal vielen Dank für deine Hilfe!
der JS-Code des Beispiels ist eigentlich selbsterklärend. Es gibt einen Drop-Handler, in den du eine eigene Funktion aufrufen kannst, die irgendwo versteckte Formularfelder einfügt - das machst du mit createElement, appendChild und anderen Standard-DOM-Funktionen - oder in ein einziges verstecktes Formularfeld Werte reinschreibt - das solltest du auch http://de.selfhtml.org/javascript/objekte/elements.htm@title=hinbekommen.
Ich habe jetzt dem event-Handler eine Anweisung hinzugefügt, ein verstecktes Input-Feld innerhalb des Formulars zu erstellen:
drop.addEvents({
'drop': function() {
drop.removeEvents();
clone.remove();
item.clone().inject(drop);
dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
var myFeld = document.createElement("input");
myFeld.setAttribute("type","hidden",0);
myFeld.setAttribute("name","Hiddenfield",0);
myFeld.setAttribute("value","Id des gedragten Items",0); // <---- hier komme ich nicht weiter
var Ausgabebereich = document.getElementById("OrtimFormular");
Ausgabebereich.appendChild(myFeld);},
'over': function() {
dropFx.start('98B5C1');
},
'leave': function() {
dropFx.start('ffffff');
}
});Allerdings komme ich an dieser Stelle nicht weiter.
Wie kann man dem Value des versteckten Feldes die Id oder den Namen des per Drag and Drop bewegten Divs (enthält das Bild des Items) zuordnen?<div class="item" id="paket1" style="background-image: url(pix/1.png);"><span>Paket 1</span></div>
<div class="item" id="paket2" style="background-image: url(pix/2.png);"><span>Paket 2</span></div>
Davon abgesehen möchte ich dir, auch wenn ich deinen konkreten Anwendungsfall nicht kenne, dringend davon abraten, solche unnützen JavaScript-Spielerien für wichtige Funktionen zu verwenden. Drop und Drop ist schwierig, unhandlich und unzugänglich. Wenn du ein Element einer Liste hinzufügen willst, nimm eine schnöde Schaltfläche. Das geht viel schneller, es ist Tastatur-navigierbar, du kannst in der Liste wieder Remove-Buttons haben und so weiter.
Das Mootools-Beispiel ist m.M.n. ein Beispiel für enorm unsinniges JavaScript. Webshops, auch solche mit starkem JavaScript-Einsatz, verwenden einfache Schaltflächen, um etwas in den Einkaufswagen zu legen. Das ist bewährt und dabei sollte es auch bleiben. Ich brauche nicht bei jedem »hinzufügen« ein Drag und Drop.
Ich teile deine Meinung über den Umgang mit Javascript, allerdings ist es in diesem Fall (ausnahmsweise) wirklich im Sinne des Users (Pakete sollen virtuell in eine Kuriertasche abgelegt werden). Als Alternative wird trotzdem ein einfaches, Javascript-freies Formular zur Verfügung stehen.
Nochmals danke für deine Mühe!
-
Hallo,
Wie kann man dem Value des versteckten Feldes die Id oder den Namen des per Drag and Drop bewegten Divs (enthält das Bild des Items) zuordnen?
Schau dir nochmal an, wie der Quellcode des Beispiels funktioniert. Da werden alle Elemente mit class="item" durchlaufen und für jedes wird eine Funktion ausgeführt. In dieser Funktion verweist die Variable item auf das Element.
Diese Variable wird durch Closures in die Handler-Funktionen weitervererbt, sodass man dort mit item darauf zugreifen kann. Das wird im Beispiel auch in der Zeile item.clone().inject(drop); gemacht (= klone das item und füge es dem Drop-Bereich hinzu).
Ich weiß jetzt nicht, ob das ein Mootools-Wrapper oder direkt ein Elementobjekt ist, jedenfalls wirst du darüber Zugriff auf das gedroppte Element erlangen.
Mathias
-
Hallo,
nochmals vielen Dank für deine Hilfe. Die Lösung lag tatsächlich nahe bei "item", und zwar einfach item.idHier nochmal der Code für ebenfalls akut betroffene:
drop.addEvents({
'drop': function() {
drop.removeEvents();
clone.remove();
item.clone().inject(drop);
dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));var geheimtext = document.createTextNode(item.id + ", "); //Das Komma hilft bei mehreren einträgen
document.getElementById("pakete").appendChild(geheimtext);},
'over': function() {
dropFx.start('98B5C1');
},
'leave': function() {
dropFx.start('ffffff');
}
});..im Formular einfach noch
<textarea name="geheim" id="pakete" type="hidden" style="display:none;"></textarea>
hinzufügen und es sollte klappen.
-
-
-