[php]drag en drop systeem bouwen en opslaan in database

[hobbeldebobbel]

ik ben bezig met een plannings systeem welke volledig webbase is.
één van de onderdelen is een indeling maken van cursisten over de verschillende opleidingsplaatsen.
Om dat een beetje inzichtelijker te maken wil ik een soort van drag-and-drop systeem bouwen. Ik kan natuurlijk een lijst maken en daar achter een plek selecteren uit een drop down select box, maar das natuurlijk niet echt gebruikers vriendelijk.

Na een beetje rondzwerven op internet kwam ik bij deze link uit. In principe is dit precies wat ik zoek:

aan de ene kant een rij cursisten(capitals) en aan de andere kant een aantal opleidingsplaatsen(landen).
Als ik in de code duik dan veranderd hij de DOM structuur door de div van de capital in de node van het landen-divje te plaatsen (als ik het tenminste goed voor ogen heb).

Op zich zou ik hiermee een mooi drag and drop systeem kunnen bouwen, maar ik loop tegen een aantal problemen op waar ik me geenraad mee weet.
het inladen van de gegevens moet niet al te moeilijk zijn aangezien ik de html gewoon kan opbouwen met php en de database waar de data in staat.
Echter het opslaan van de gegevens na het slepen levert het grootste probleem op.

Hoe kan ik nou de nieuwe HTML die gemaakt is door het ajax script ombouwen naar iets wat op te slaan is de database?
Ik kan natuurlijk de hele htmlcode van de uiteindelijke pagina bij het klikken op "opslaan" versturen en ergens deze helemaal doorlopen op tags.... maar iets zegt me dat dat teveel werk is en dat het makkelijker kan.

kom er net achter dat de html code van de bron helemaal niet veranderd.

op deze link de testsite is inmiddels aangepast. staat een voorbeeld van wat ik op dit moment gemaakt en werkend heb. Het werkt tot het punt van opslaan.
hoe kan ik dit het beste aanpakken?

[ Voor 15% gewijzigd door hobbeldebobbel op 01-02-2007 23:29 ]

[pietje63]

Hoe kan ik nou de nieuwe HTML die gemaakt is door het ajax script ombouwen naar iets wat op te slaan is de database?

Niet goed gekeken...
Ik denk dat dit meer een javascript dan een php iets is.

Op het moment dat er 'iemand' versleept wordt run je een javascript. In dit javascript zou je een ajax-request kunnen doen waarbij je de nieuwe volgorde van de cursisten doorgeeft die je vervolgens via php/mysql opslaat in de database.

Let er wel op dat je op die manier bij elke verplaatsing het opslaat, misschien is een knopje 'opslaan' logischer. Dan kun je daarbij gewoon de volgorde van de cursisten doorgeven naa een nieuwe pagina waar je het opslaat.

Note1: als je nu iemand versleept die al in een boot zit gaat het verkeerd, verder kun je mensen alleen naar beneden slepen en niet omhoog.

Verder denk ik dat als je op 'opslaan' klikt je gewoon de textfields die je hebt kunt submitten naar eenphp pagina. Daar kun je de komma's ontleden en heb je de mensen in de goede volgorde.. Die kun je makkelijk in een database zetten ofzo.

Wat is precies het probleem?

[ Voor 24% gewijzigd door pietje63 op 30-01-2007 23:30 ]

[mithras]

pietje63 schreef op dinsdag 30 januari 2007 @ 23:25:
[...]

Niet goed gekeken...
Ik denk dat dit meer een javascript dan een php iets is.

Op het moment dat er 'iemand' versleept wordt run je een javascript. In dit javascript zou je een ajax-request kunnen doen waarbij je de nieuwe volgorde van de cursisten doorgeeft die je vervolgens via php/mysql opslaat in de database.

Let er wel op dat je op die manier bij elke verplaatsing het opslaat, misschien is een knopje 'opslaan' logischer. Dan kun je daarbij gewoon de volgorde van de cursisten doorgeven naa een nieuwe pagina waar je het opslaat.

Note1: als je nu iemand versleept die al in een boot zit gaat het verkeerd.

Verder denk ik dat als je op 'opslaan' klikt je gewoon de textfields die je hebt kunt submitten naar eenphp pagina. Daar kun je de komma's ontleden en heb je de mensen in de goede volgorde.. Die kun je makkelijk in een database zetten ofzo.

Wat is precies het probleem?

Ik zou het niet zo aanpakken, want dan verstuur je een request bij elke sleep actie. Als je nu een javascript array bijhoudt welke cursist waar zit, dan kan je via een form submit netjes de array doorgeven. Via POST/GET kan je met php verder je array bewerken en in een database stoppen.
Als je straks 100 cursisten hebt en elke keer een query uitvoert lijkt me het makkelijker én sneller (hoewel je dat hoogst waarschijnlijk niet merkt)

Je moet dus bij het toevoegen van een "klant" bij een "cursus" de klant toevoegen in de array, bij het uitslepen van de klant uit de cursus de entry uit de array verwijderen bijbehorend met deze klant. En deze twee acties lijken me nu niet de meest ingewikkelde

hobbeldebobbel schreef op dinsdag 30 januari 2007 @ 23:35:
[...]


dat was ik net aan het doen.. alleen gooide ik alles in een text field van eem formulier...
maar morgen ga ik inderdaad alles in een array van JS opslaan en die array submitten...

ik dacht weer eens veels te moeilijk (oa aan XML opgebouwde documenten enzo

Dat kan je wel doen, asynchroon xml dingen doen; typisch AJAX werk (goh, waar zou de afkorting voor staan ), maar je vraagt je dan (terecht) af of je het allemaal wel nodig hebt
En mbt het textfield: ik had het gezien, alleen zou ik als je dat erbij wil houden _toch_ een javascript array ernaast bijhouden. En de textfields vragen eerder om problemen: spaties en komma's toevoegen, dingen weer splitsen.. Keep it simple, stupid

[ Voor 27% gewijzigd door mithras op 30-01-2007 23:42 ]

[hobbeldebobbel]

mithras schreef op dinsdag 30 januari 2007 @ 23:31:
[...]
Je moet dus bij het toevoegen van een "klant" bij een "cursus" de klant toevoegen in de array, bij het uitslepen van de klant uit de cursus de entry uit de array verwijderen bijbehorend met deze klant. En deze twee acties lijken me nu niet de meest ingewikkelde

dat was ik net aan het doen.. alleen gooide ik alles in een text field van eem formulier...
maar morgen ga ik inderdaad alles in een array van JS opslaan en die array submitten...

ik dacht weer eens veels te moeilijk (oa aan XML opgebouwde documenten enzo)

maar dan mag deze naar scripting

[ Voor 5% gewijzigd door hobbeldebobbel op 30-01-2007 23:45 ]

[xces]

Ik gebruik al tijden de combinatie jQuery[1] en Interface[2]. jQuery is een javascript library van nog geen 20kb met volledige ajax support. Deze combinatie kan dus PRECIES wat jij hier omschrijft. Het onderdeel daarvan is "sortables". Het is een beetje kl*te dat de demo[3] nu down is

Blader anders eens door de plugin lijst[4] van jQuery, dan krijg je misschien zelfs nog wel meer ideeen.

Links:
[1] http://www.jquery.com/
[2] http://interface.eyecon.ro/
[3] http://interface.eyecon.ro/demos/sort.html
[4] http://www.jquery.com/plugins/

disclaimer: Zoals altijd zijn er meer wegen die naar Rome leiden, en ik zal je nu alvast vertellen dat er vast mensen gaan reageren die zeggen; Ik gebruik "MooTools", of "Ik gebruik Prototype en scriptaculous". Ik heb de laatste combinatie ook gebruikt, vanaf versie 1.2 tot 1.4 en in die tijd was er erg weinig documentatie van Prototype. Toen ik jQuery zag schrok ik in eerste instantie van de manier van scripten, maar het went snel. Prototype was toendertijd icm Scriptaculous al gauw 250kb+ om in te laden, terwijl jQuery toen 15kb was.

[hobbeldebobbel]

mithras schreef op dinsdag 30 januari 2007 @ 23:31:
Je moet dus bij het toevoegen van een "klant" bij een "cursus" de klant toevoegen in de array, bij het uitslepen van de klant uit de cursus de entry uit de array verwijderen bijbehorend met deze klant. En deze twee acties lijken me nu niet de meest ingewikkelde

nou het blijkt dus een beetje moeilijker te zijn dan ik dacht...

ik het nu een JS array en moet die dmv een post methode naar PHP zijn te krijgen...
hoe doe ik dat in godsnaam?

ik heb geprobeerd om de array in een text veld te gooien, en dan het formulier te submitten; maar dat resulteerd in een lege $_POST array....
hier bouw ik de array op:

JavaScript:

var bootindeling = new Array();
bootindeling["bootid23"] = new Array();
bootindeling["bootid23"]["instructeur"] = 'richard';
bootindeling["bootid23"],push('34','56');

dit levert een mooie multidimensionale array op die alles bevat van belang en waarmee ik straks in do_bootindeling.php kan bewerken en omzetten in sql.

hoe krijg ik nu die JS-array verzonden?

[hobbeldebobbel]

gevonden...
gewoon een serialize functie alla php gebruiken die crisp gemaakt heeft voor got...
en die dan weer unserializen in php.