5 Items, volgorde instellen...

[TangLeFuzZ]

Hey,

ik zit niet echt met een probleem, maar ik mis zelf denk ik een stukje inzicht op dit gebied want ik kan niet echt een goeie oplossing vinden voor het volgende:

Ik heb 5 items onder elkaar staan, (5 plaatjes bijvoorbeeld), nu wil ik dat een gebruiker van m'n site de volgorde van die 5 items zelf kan bepalen, hoe kan ik het formulier om die volgorde in te stellen nou het beste opzetten?

Wat zou kunnen is de items onder elkaar zetten en daar rechts naast telkens een selectboxje met 1 t/m 5 erin, maar dan zou de user bij 2 items bijv 5 kunnen selecteren en dat vind ik niet echt netjes (in PHP komt er bij de verwerking natuurlijk wel een check in om dit te voorkomen, maar ik zou graag het formulier ook wat netter zien).

Ik hoop dat jullie begrijpen wat ik precies bedoel

[Bosmonster]

Allereerst zorgen dat je vanuit PHP de juiste soort pagina genereert.. En dus niet 5 controls krijgt met 2 plaatjes

Ten tweede.. kijk eens naar hoe anderen dit opgelost hebben, bijvoorbeeld Windows. Wat zie je daar? Inderdaad, gewoon een knopje naar boven en naar beneden.

Klik plaatje of item aan en kies naar boven/beneden om hem te switchen met een ander.

[jonggoud.nl]

of je doet het met radiobuttons

zoals:

code:

     keuze
david  1 2 3 4 5
joop   1 2 3 4 5

Nu noem je alle radiobuttons 1 'but1' of zo, en 2 'but2' etc. Je kan nu maar 1x 1, 1x2 etc. aanklikken!

[TangLeFuzZ]

Op zondag 21 juli 2002 11:30 schreef jonggoud.nl het volgende:
of je doet het met radiobuttons

zoals:

code:

     keuze
david  1 2 3 4 5
joop   1 2 3 4 5

Nu noem je alle radiobuttons 1 'but1' of zo, en 2 'but2' etc. Je kan nu maar 1x 1, 1x2 etc. aanklikken!

Dat is denk ik de makkelijkste oplossing ja thnx...
Stom ook dat ik er niet aan had gedacht

[Bosmonster]

Lijkt me erg gebruikersvriendelijk

[TangLeFuzZ]

Het kan wel, maar nu kan ik alsnog bij een willekeurig item 2 buttons aanvinken, en dat is ook niet de bedoeling...

Ook krijg je nu vrij veel buttons, omdat het in werkelijkheid om ongeveer 10 items gaat ipv 5.

[Verwijderd]

Ik weet niet hoever jou dhtml kennis reikt, maar het moet toch mogelijk zijn om een lijst-item te simuleren waarbij je de volgorde in kan stellen d.m.v. pijltjes? Lijkt me wel een uitdaging. Veel gebruikers zijn het inderdaad zo gewend (Windows), dus zullen ze gelijk begrijpen hoe het bedoeld is.

Dus, beter luisteren naar Bosmonster

[TangLeFuzZ]

Ik zie dat voorbeeld niet echt voor me, kun je eens een screenshot van windows posten van wat je precies bedoelt?

[Bosmonster]

Rechtsklik in explorer op je knoppenbalk en kies customize. Je kunt de volgorde van de knoppen op zon manier wijzigen. Windows gebruikt dit systeem overal waar je volgorde kunt wijzigen.

[TangLeFuzZ]

Ohja thnx, dat lijkt me ook erg duidelijk...(met move up / move down), m'n DHTML kennis is niet echt je van het, maar ik zal het eens proberen

[Verwijderd]

Post het vooral even hier als het is gelukt. Ik ben zeer benieuwd.

[Verwijderd]

dit is wel effe interessant, ik zit er namelijk ook over te denken om zoiets te implementeren. Eigenlijk om de boel omhoog of omlaag te schuiven hoef je alleen steeds 2 items te verwisselen en checken of ie niet de laatste of de eerste al is. In de praktijk stel ik me het volgende voor:

Ik heb in een fotogallery een lijst met foto's uit een database. Als e die lijst wilt aanpassen gooit ie de hele boel in een tabelletje. Aangezien e foto's moet kunnen toevoegen heb ik een dhtml frobel die onderaan de tabel rijen toevoegd. Als ik nu elke tr een id meegeeft waarin een volgnummertje is opgenomen kan ik die wel ophalen met een getElementByID. verwisselen gaat dan door degene die je wilt verplaatsen ergens tijdelijk te stallen en degene daarboven (of onder) ophalen met nextSibling (geloof ik) en dan wisselen. Nu moet ik eigenlijk nog even nadenken of ik dan ook de id's moet aanpassen aan de nieuwe volgorde of juist niet.

Anyways, ik ga eens prutsen

[crisp]

Je zou het ook met drag-drop kunnen doen. [url="http://www.crisp.demon.nl/volgorde.html"]voorbeeldje[/url]

[Bosmonster]

Op zondag 21 juli 2002 14:05 schreef crisp het volgende:
Je zou het ook met drag-drop kunnen doen. [url="http://www.crisp.demon.nl/volgorde.html"]voorbeeldje[/url]

Doe het dan wel realtime.. zo is het beetje verwarrend.. dus dat je ook de verwisselingen ziet voordat je losgelaten heb.

[Verwijderd]

Ik ga ook eens aan het prutsen. Laat het weten als ik iets heb.

[edit]Crisp, die van jou werkt niet heel instinctief. Het duurde even voordat ik doorhad hoe het werkte. Dan zou het inderdaad realtime moeten.

[TangLeFuzZ]

Op zondag 21 juli 2002 14:32 schreef Bosmonster het volgende:

[..]

Doe het dan wel realtime.. zo is het beetje verwarrend.. dus dat je ook de verwisselingen ziet voordat je losgelaten heb.

Is dat goed mogelijk dan?
Ja sorry, maar ik ben niet echt een held in DHTML zoals ik al eerder aangaf

[Verwijderd]

ik moet weer aan het werk, dus ik heb effe geen tijd om verder te prutsen: [url="http://www.rikkertkoppes.com/forum/tabletestje.html"]www.rikkertkoppes.com/forum/tabletestje.html[/url]

(de)selecteren werkt (klik op de eerste cel) en cellen toevoegen ook (half) let niet op dat volgorde verwisselen, da's niks

[Verwijderd]

Ik geloof dat het me is gelukt. Even uploaden..

edit:

kijk en huiver
[url="http://www.thaxdesign.nl/~peter/proeftuin/lijst.html"]http://www.thaxdesign.nl/~peter/proeftuin/lijst.html[/url]

edit 2:

Hmm volgens mij blijft bij Windows een item geselecteerd nadat je hem verplaatst, zodat je hem snel verder omhoog/omlaag kan werken. Nou goed, als daar behoefte aan is moet je na moveUp of moveDown selected niet op 0 maar op newId zetten (zie code)

[TangLeFuzZ]

Op zondag 21 juli 2002 15:02 schreef YaZe het volgende:
Ik geloof dat het me is gelukt. Even uploaden..

edit:

kijk en huiver
[url="http://www.thaxdesign.nl/~peter/proeftuin/lijst.html"]http://www.thaxdesign.nl/~peter/proeftuin/lijst.html[/url]

Ziet er goed uit!
Ik zou alleen nog ff onderaan je moveup en movedown functies selectTD (newId) zetten, zodat een item na move geselecteerd blijft (als je 'm meerdere plaatsen wilt moven is dat wel handig ).

[Verwijderd]

Zie edit 2

[TangLeFuzZ]

Ok

Ik heb er zelf ook nog een functie DeSelect bij ingezet die ik in de Select functie oproep zodat hij eerst alle items deselecteerd en dan pas een nieuwe selecteerd (bij je huidige versie kun je er meerdere selecteren), ik weet alleen zo 1 2 3 niet hoe je kunt zeggen dat hij alle id's moet pakken dus doe ik het handmatig:

code:

function DeSelect ()
 {
    selected = '';
    document.getElementById('td'+1).style.backgroundColor='#FFFFFF';
    document.getElementById('td'+2).style.backgroundColor='#FFFFFF';
    document.getElementById('td'+3).style.backgroundColor='#FFFFFF';
    document.getElementById('td'+4).style.backgroundColor='#FFFFFF';
}

Als iemand daar nog even een mooiere oplossing voor heeft is hij perfect!

[Verwijderd]

Kan natuurlijk gewoon met een while/for loopje he. Het enige wat je dan moet weten is hoeveel items er zijn. Maar hoe is het mogelijk meerdere items te selecteren in mijn ding? Of gaat het hier om iets van jou?

Edit:

ik zie het al. Er worden hier niet meerdere dingen geselecteerd. Als je op moveUp drukt dan zie je ook dat er maar 1 verplaatst. In de select() functie krijgt iets alleen een achtergrondkleurtje. Dus je kunt er meer een achtergrondkleurtje geven. Dus je zou in de select functie eerst alle achtergrond kleurtjes weg moeten halen.

[TangLeFuzZ]

Op zondag 21 juli 2002 15:23 schreef YaZe het volgende:
Kan natuurlijk gewoon met een while/for loopje he. Het enige wat je dan moet weten is hoeveel items er zijn. Maar hoe is het mogelijk meerdere items te selecteren in mijn ding? Of gaat het hier om iets van jou?

Gewoon een item selecteren, en daarna een ander item selecteren.
Win XP, IE 6.0

[Verwijderd]

Woei zie edit opnieuw

[TangLeFuzZ]

Ok
Maar ik hou 'm zoals ik 'm nu heb...werkt lekker.

[Verwijderd]

Okay dan! Kun je laten zien hoe/waar je hem gebruikt? Overigens, ik weet niet hoe het zit met cross-browser compatibility. Even testen op NS kan misschien geen kwaad.

[TangLeFuzZ]

Op zondag 21 juli 2002 15:56 schreef YaZe het volgende:
Okay dan! Kun je laten zien hoe/waar je hem gebruikt? Overigens, ik weet niet hoe het zit met cross-browser compatibility. Even testen op NS kan misschien geen kwaad.

In NS werkt ie bij mij goed.
Ik kan het nog niet laten zien, omdat ik het verwerk in de nieuwe frontpage van Clubcharts, die ik eind Augustus pas launch...als het zover is zal ik het laten weten (mits onthouden ).

[TangLeFuzZ]

Ik moet het nu alleen nog voor elkaar krijgen om een nummering van 1 t/m 10 te krijgen, die niet meegaat met het verplaatsen waaraan ik die items hang, zodat ik bij het verwerken van een formulier de volgorde van de items kan gebruiken .

[crisp]

Op zondag 21 juli 2002 14:32 schreef Bosmonster het volgende:

[..]

Doe het dan wel realtime.. zo is het beetje verwarrend.. dus dat je ook de verwisselingen ziet voordat je losgelaten heb.

True; het was ook maar een snel in elkaar geflanst voorbeeldje. Je zou het ook wat meer kunnen laten lijken op de dragmogelijkheid van bijvoorbeeld je startmenu; die trouwens ook niet 'realtime' is.

[Verwijderd]

Op zondag 21 juli 2002 17:44 schreef TangLeFuzZ het volgende:
Ik moet het nu alleen nog voor elkaar krijgen om een nummering van 1 t/m 10 te krijgen, die niet meegaat met het verplaatsen waaraan ik die items hang, zodat ik bij het verwerken van een formulier de volgorde van de items kan gebruiken .

Dan maak je toch gewoon een array met id's die omwisselen? Zodat je na een tijdje een array hebt met:
0,1,3,5,4,2,8,6,9,7
Lijkt me wel te doen

[TangLeFuzZ]

Ok ik heb nu een array gemaakt, en in beide move functies pas ik die array aan op de volgende manier:

code:

    oud = mijn_array[selected]
    mijn_array[selected] = mijn_array[newId]
    mijn_array[newId] = oud

Alleen nu nog het volgende; hoe pass ik die JS array door met mijn formulier?
Ik heb zoiets nog nooit gedaan (JS array icm een PHP form) dus weet zo niet hoe het moet...

[Verwijderd]

Op zondag 21 juli 2002 22:36 schreef TangLeFuzZ het volgende:
Ok ik heb nu een array gemaakt, en in beide move functies pas ik die array aan op de volgende manier:

code:

    oud = mijn_array[selected]
    mijn_array[selected] = mijn_array[newId]
    mijn_array[newId] = oud

Alleen nu nog het volgende; hoe pass ik die JS array door met mijn formulier?
Ik heb zoiets nog nooit gedaan (JS array icm een PHP form) dus weet zo niet hoe het moet...

Wegschrijven als hidden textfield?

[TangLeFuzZ]

Klopt, en dat werkt goed..

Ik ben nu zover dat ik het eigenlijk werkend heb, met de PHP verwerking erbij, maar ik zit nog met een afrondingsprobleem, vrij groot wel...

Als ik m'n indeling heb aangepast is de volgorde gewijzigd, het item met id 5 staat dan bijv. niet meer op de 5e plek maar op de eerste, je krijgt dan zoiets:

code:

<tr>
<td id=\"5\" onClick=\"selectTD(5)\" class=\"hand\">
div class=med>item 5</div>
</td>
</tr>
<tr>
<td id=\"1\" onClick=\"selectTD(1)\" class=\"hand\">
div class=med>item 1</div>
</td>
</tr>
<tr>
<td id=\"2\" onClick=\"selectTD(2)\" class=\"hand\">
div class=med>item 2</div>
</td>
</tr>

etc

Het probleem is alleen dat het movescript nu niet meer goed werkt omdat de volgorde niet meer klopt.

[crisp]

Op maandag 22 juli 2002 00:03 schreef TangLeFuzZ het volgende:
Klopt, en dat werkt goed..

Ik ben nu zover dat ik het eigenlijk werkend heb, met de PHP verwerking erbij, maar ik zit nog met een afrondingsprobleem, vrij groot wel...

Als ik m'n indeling heb aangepast is de volgorde gewijzigd, het item met id 5 staat dan bijv. niet meer op de 5e plek maar op de eerste, je krijgt dan zoiets:

code:

<tr>
<td id=\"5\" onClick=\"selectTD(5)\" class=\"hand\">
div class=med>item 5</div>
</td>
</tr>
<tr>
<td id=\"1\" onClick=\"selectTD(1)\" class=\"hand\">
div class=med>item 1</div>
</td>
</tr>
<tr>
<td id=\"2\" onClick=\"selectTD(2)\" class=\"hand\">
div class=med>item 2</div>
</td>
</tr>

etc

Het probleem is alleen dat het movescript nu niet meer goed werkt omdat de volgorde niet meer klopt.

1 tip: bespaar jezelf een hoop ellende, en begin je id's niet met een cijfer!

[Verwijderd]

In mijn script beginnen ze ook niet met cijfers maar heten ze td1, td2 etc, maar het eigenlijke probleem blijft hetzelfde.

Misschien de eigenlijke volgorde ook meesturen in een hidden field? Dat je het aan de hand daarvan in de goede volgorde kunt zetten?

[TangLeFuzZ]

Op maandag 22 juli 2002 00:18 schreef YaZe het volgende:
In mijn script beginnen ze ook niet met cijfers maar heten ze td1, td2 etc, maar het eigenlijke probleem blijft hetzelfde.

Ja klopt, maar ik ben nog niet echt op problemen gestuit met getallen als id's..
Zal je advies opvolgen though

Nu alleen dat probleem nog...

[TangLeFuzZ]

Ik ben hem wat aan het herschrijven, maar het gaat nog niet helemaal lekker, ik wil de array nu ook mee wijzigen en heb er tot nu toe het volgende van gemaakt:

code:

function moveUp()
{
    if (selected == 0 || selected == 1)
        return;
                
    selectedContent = document.getElementById('td'+selected).innerHTML;
    element = Array.prototype.find(selected);
    newElement = element -1;
    newId = tracker[newElement];
    
    tracker[element] = tracker[newElement];
    tracker[newElement] = selected;
    
    newContent = document.getElementById('td'+newId).innerHTML;
    document.getElementById('td'+selected).innerHTML = newContent;
    document.getElementById('td'+newId).innerHTML = selectedContent;
            
    document.getElementById('td'+selected).style.backgroundColor='#ffffff';
    selected = 0;
    selectTD (tracker[element]);
}

De eerste keer lijkt het goed te gaan, maar daarna gaat het mis...

Ik gebruik trouwens deze functie (met dank aan Pelle) om te kijken welk element het is:

code:

        Array.prototype.find = function(needle) {
            for (var i in tracker) {
                if (tracker[i] == needle) return i;
            }
            return false;
        }

[Verwijderd]

wellicht zijn mensen hierin geinteresseerd: http://www.rikkertkoppes.com/newhome/test.asp
een soorteervoorbeeld, dit is alleen getest in ie6, omdat het voor een cms is dt ik alleen beheer. De elementen worden trouwens uit een database gevist.
Het idee is dus dat er nog een knoppie "save" onder komt die de nodes op volgorde van een orderId voorziet en vervolgens de hele bende met eventueel gewijzigde texten enzo terugmikt in de database.

Vooralsnog ging het mij om de sorteerfunctie er lekker in te krijgen, vandaar dat ik 'm in dit topic mik, zodat mensen er wellicht nog iets aan hebben. Verder geen vragen erover dus, opmerkingen zijn echter altijd welkom

[Bosmonster]

Het kan aan mij liggen Mophor.. maar bij mij onder IE6 doet het helemaal niks

Kan een beetje klikken en draggen, maar er veranderd niks.. krijg alleen af en toe een grijs kader en zwart lijntje ofzo. En als ik maar lang genoeg doorga zijn ze allemaal grijs

[Verwijderd]

niet aan het plaatje draggen, dat werkt niet idd - weet iemand btw hoe dit simpel te implementeren is?

_{en het is "mophor", met een kleine "m", of "lul" voor de vrienden, maar dan ook met een kleine (als in lowercase) "l"}

[Bosmonster]

Ow.. ja nu werkt het wel.. niet echt logisch imho (ik doe het als redelijk ervaren internet gebruiker al fout )..

Je wilt immers toch de plaatjes van plaats wijzigen, maar je moet niet de plaatjes draggen.. daar valt nog wat te verbeteren!

[r0bert]

* r0bert heeft topic verder niet gelezen
Ik heb bovenstaande gefixed dmv

objPrev = obj.previousSibling.clondeNode(true);
obj.previousSibling.replaceNode(obj.cloneNode(true));
obj.replaceNode(objPref);

welke nodes je moet hebben (parentNode.parentNode enz) moet je dan nog maar even uitzoeken

[Verwijderd]

Verwijderd schreef op 15 November 2002 @ 14:46:
wellicht zijn mensen hierin geinteresseerd: http://www.rikkertkoppes.com/newhome/test.asp
een soorteervoorbeeld, dit is alleen getest in ie6, omdat het voor een cms is dt ik alleen beheer. De elementen worden trouwens uit een database gevist.
Het idee is dus dat er nog een knoppie "save" onder komt die de nodes op volgorde van een orderId voorziet en vervolgens de hele bende met eventueel gewijzigde texten enzo terugmikt in de database.

Vooralsnog ging het mij om de sorteerfunctie er lekker in te krijgen, vandaar dat ik 'm in dit topic mik, zodat mensen er wellicht nog iets aan hebben. Verder geen vragen erover dus, opmerkingen zijn echter altijd welkom

LoL het lukt me maar niet om de items van plaats te verwisselen
het is me 1x perongeluk gelukt
uitleg graag (te nieuwsgierig)

[Bosmonster]

Verwijderd schreef op 15 November 2002 @ 18:35:
[...]


LoL het lukt me maar niet om de items van plaats te verwisselen
het is me 1x perongeluk gelukt
uitleg graag (te nieuwsgierig)

Lees even twee replies terug en je weet het..

mOPHOR is er nog niet achter hoe je ze aan het plaatje kan draggen

[Verwijderd]

Ow.. ja nu werkt het wel.. niet echt logisch imho (ik doe het als redelijk ervaren internet gebruiker al fout )..

ow ik begreep dit verkeerd dacht dat het verwisselen (dus niet dmv draggen) wel werkte maar wist niet hoe

Edit: Maar hoe was het mijn dan wel gelukt ?! ik had body 5 met body 4 gewisseld dat weet ik zeker (geen screenshot gemaakt , ik had het gedaan door heel erg veel te klikken en draggen enz en ineens verplaatste ze )

[r0bert]

Je kunt de items verplaatsen door op de tekst te klikken en vervolgens te slepen.. dus niet op het plaatje