ArtikelBeställa

Dra och släpp i appen: ordna utan att tappa poster

Du flyttar en uppgift och listan ser rätt ut. Men efter omladdning ligger den tillbaka, eller så flyttar nästa knapptryck fel rad. Beställ en liten omordningsfunktion med tydliga facit för poster, sparande och fokus.

Publicerad · Senast granskad

Abstrakt trämodell med stående svarta och vita block, en ljus tvärgående kloss och en sned röd stav på en vit bas.
En ändrad placering räcker inte: kontrollera att samma poster finns kvar och att ordningen består efter bekräftad sparning och omladdning.
Vad du beställer

En flytt ändrar ordningen, inte vilka poster som finns. Beställ dra och släpp tillsammans med klickbara Flytta upp och Flytta ned. Samma post ska gå att följa efter flytten, och ordningen ska finnas kvar efter bekräftad sparning och omladdning.

Börja med fem poster och ett skriftligt facit

Skapa en separat testlista med fem påhittade uppgifter: P1 Boka lokal, P2 Köp fika, P3 Skicka inbjudan, P4 Testa projektorn och P5 Skriv skyltar. Låt testbeteckningen synas i raden och i postens detaljvy. Skriv upp startordningen P1, P2, P3, P4, P5 innan du flyttar något. När du öppnar P3 efter en flytt ska den fortfarande vara samma uppgift med samma innehåll.

Fem rader gör facit lätt att kontrollera: flytta P3 över P2 och förvänta dig P1, P3, P2, P4, P5. Räkna också posterna. Ett korrekt antal räcker inte om en rad har ersatts av en kopia av en annan; varje beteckning ska förekomma en gång. Kontrollera både beteckningar och innehåll, särskilt om två uppgifter senare får samma rubrik.

Avgränsa första beställningen till en användare, en komplett lista och en sparad flytt i taget. Stäng av filter och använd manuell ordning i denna vy. Att flytta bland dolda poster kräver ett extra beslut: vad betyder exempelvis ”upp” om raden ovanför är bortfiltrerad? Samma sak gäller sidindelning. Paginering i appen handlar om vilka poster som hämtas; lös det separat innan du beställer flytt mellan sidor.

Beställ klick och tryck utöver själva dragningen

I W3C:s vägledning till SC 2.5.7 är poängen ett alternativ med en pekare utan dragning. Sorterbara listor med upp- och nedkontroller finns bland exemplen. Tangentbordsstöd bedöms separat; en funktion som bara erbjuder dragning och kortkommandon kan fortfarande sakna ett alternativ för enkla klick eller tryck.

Beställ därför synliga Flytta upp och Flytta ned på varje rad, eller bakom en tydlig radmeny som öppnas med ett tryck. Knapparna ska ange vilken post de gäller även när du använder skärmläsare, exempelvis ”Flytta Skicka inbjudan upp”. Prova dem också med mus utan att dra. På mobilen ska du kunna trycka på dem med ett finger och ändra ordningen utan att hålla fingret nedtryckt.

Tangentbordsvägen är ett eget prov. SC 2.1.1 om tangentbord behandlar att funktionalitet ska kunna användas genom ett tangentbordsgränssnitt. Här väljer du att samma flyttknappar ska fungera där. WCAG används som tekniskt underlag för beställningen; artikeln avgör inte vilka lagkrav som gäller din app och är ingen fullständig WCAG-granskning.

Kopiera beställningen till ditt AI-verktyg

Byt ut listans namn och ge verktyget testposterna ovan. Kräv en demonstration av varje prov innan du godkänner funktionen. Beställningen gör medvetet nästa flytt otillgänglig medan en sparning väntar. Det begränsar snabb omordning men ger ett tydligt första flöde att kontrollera.

Beställning: omordna en komplett lista
Gör [min uppgiftslista] omordningsbar med dra och släpp samt
klickbara Flytta upp och Flytta ned för varje post. Knapparna
ska också kunna nås och aktiveras med tangentbord. Namnen ska
ange vilken post knappen gäller. Ändra ingen annan funktion.

Det gäller en användare, en komplett ofiltrerad lista och manuell
ordning. Samma poster och deras innehåll ska finnas före och efter.
Flytten får inte skapa, radera eller kopiera en post.

Behåll fokus hos den flyttade posten efter en knappflytt. Första
posten ska inte kunna flyttas upp, sista inte ned. Om den använda
knappen då blir otillgänglig ska fokus hamna på den flyttade radens
kvarvarande flyttknapp. Beskriv detta innan du bygger.

Visa Sparar medan ordningen sparas och tillåt nästa flytt först
när detta försök är avgjort. Visa Sparad först efter bekräftelse
från appens avsedda lagringsplats. Efter bekräftelse och omladdning
ska samma ordning finnas kvar. Beskeden ska kunna förmedlas till
skärmläsare utan att ta fokus.

Vid ett bekräftat avslag: visa att flytten inte sparades och återställ
senast bekräftade ordning. Behåll alla poster och fokus vid den post
jag försökte flytta. Låt mig försöka flytta igen efter felet.
Om utfallet är okänt ska appen säga det, inte visa Sparad.

Ordna i testmiljön ett kontrollerat avslag där sparningen verkligen
inte genomförs. Visa hur jag provar det och hur testläget stängs av.
Demonstrera dragning, klick/tryck, tangentbord, fokus, omladdning
och avslag med P1–P5. Visa eventuella begränsningar tydligt.

Prov 1: dra P3 och kontrollera det som ligger kvar

Återgå till startordningen och dra P3 mellan P1 och P2. Släpp och läs av ordningen innan du gör något mer. Facit är P1, P3, P2, P4, P5, fem poster och oförändrad text i varje post. Öppna P3 för att kontrollera innehållet och gå tillbaka. En snygg rörelse som lämnar en tom rad, en kopia eller fel detaljvy ska rapporteras som fel.

Vänta på ”Sparad” och ladda sedan om samma lista. Facit ska fortfarande stämma. Om ordningen återgår efter omladdningen har du inte fått det sparbeteende du beställt. Upprepa på mobilen: dra samma rad och kontrollera att det fortfarande går att rulla listan på vanligt sätt utanför dragytan. Skriv upp telefon och webbläsare; ett lyckat skrivbordsprov säger inte vad du själv har observerat på mobilen.

Prov 2: gör samma flytt utan att dra

Återställ och bekräfta startordningen. Klicka på Flytta upp för P3 en gång. Du ska få exakt samma facit som i dragprovet. Ladda om efter ”Sparad” och kontrollera igen. Gör sedan motsvarande prov med ett vanligt tryck på mobilen. Lägg undan dragningen under detta prov: målet är att se om knapparna ensamma räcker.

Tryck Flytta ned för P3 för att återgå till startordningen och invänta bekräftelsen. Prova även gränserna: P1 kan inte flyttas upp och P5 kan inte flyttas ned. Ett försök vid kanten ska inte lägga posten sist eller först. Flytta P2 upp till första plats och kontrollera att det fortfarande finns en begriplig väg tillbaka ned.

Prov 3: följ samma post med tangentbordet

Starta åter från P1, P2, P3, P4, P5. Använd Tab tills du når P3:s Flytta upp. Aktivera knappen med tangentbordet och vänta ut sparningen. Kontrollera var den synliga fokusmarkeringen finns. Den ska följa den flyttade posten enligt beställningen. Om fokus i stället stannar på rad nummer tre och nu gäller P2 riskerar nästa tryck att flytta fel uppgift.

Aktivera Flytta upp för P3 igen när första flytten är bekräftad. P3 ligger nu först. Den använda uppknappen blir otillgänglig, så beställningens facit är fokus på P3:s Flytta ned. Aktivera den och kontrollera att P3 flyttas en plats ned. Prova också att fortsätta med Tab och gå tillbaka med Shift+Tab utan att hamna vid sidans början.

Lyssna med skärmläsare om du kan och be annars om en demonstration. Kontrollera att du hör vilken post knappen gäller och att sparbeskedet förmedlas. W3C:s SC 4.1.3 om statusmeddelanden ger underlag för att sådana besked ska kunna förmedlas till hjälpmedel utan fokusflytt. Det är inte ett bevis för att ordningen har sparats; det kontrollerar du med omladdningen.

Prov 4: låt sparningen få ett kontrollerat avslag

Be verktyget slå på det beställda avslagsläget i testmiljön. Börja med bekräftad startordning. Flytta P3 upp och vänta på svaret. Nu ska appen säga att flytten inte sparades och återgå till P1, P2, P3, P4, P5. Alla fem poster och deras innehåll ska finnas kvar. Fokus ska fortfarande gälla P3, även när raden återgår till sin tidigare plats.

Ladda om efter det bekräftade avslaget och kontrollera samma startordning. Stäng av avslagsläget, gör flytten igen, invänta ”Sparad” och ladda om. Nu gäller P1, P3, P2, P4, P5. Det skiljer en återhämtad funktion från en som visar fel men sedan lämnar flyttknapparna obrukbara.

Att enbart stänga av nätet ger inte samma tydliga facit: du kan sakna besked om vad lagringsplatsen hann göra. Om utfallet är okänt ska appen visa den osäkerheten och kontrollera bekräftad ordning innan den låter dig fortsätta. Godkänn inte ”Sparad” för att en rad har bytt plats lokalt. Läs gärna artikeln om autospara och tydliga tillstånd för skillnaden mellan ett försök och en bekräftelse.

Spara ett facit som går att upprepa

Notera testmiljö, datum, enhet, webbläsare, startordning, handling och faktisk slutordning. Skriv separat vad du såg före och efter omladdning, vilket sparbesked som visades och var fokus hamnade. ”P3 upp, P2 fick fokus, nästa tryck flyttade P2” går att arbeta vidare med; ”dragningen känns konstig” saknar motsvarande facit.

Godkänn när alla fyra proven ger sina förväntade resultat och återförsöket fungerar. Detta är föreslagna acceptanskrav, inte rapporterade resultat från en färdig app. Primärkällorna kontrollerades 29 oktober 2026. Du har då avgränsat just flytt och sparad ordning; hantering av flera samtidiga användare, filtrerade listor och flytt mellan sidor behöver egna beslut.

FAQ

Måste dra och släpp ha Flytta upp och Flytta ned?

Det är alternativet i den här beställningen. W3C ger upp- och nedkontroller som exempel för sorterbara listor. Andra alternativ kan fungera, men här ska samma flytt gå att göra med enkla klick eller tryck.

Räcker tangentbordsstöd som alternativ till dragning?

Tangentbordsstöd ensamt uppfyller inte automatiskt SC 2.5.7. Prova både tangentbordet och ett alternativ som fungerar med klick eller tryck utan att dra.

Hur provar jag att ordningen har sparats?

Flytta en testpost, invänta bekräftelsen Sparad och ladda om samma lista. Jämför hela ordningen med ditt facit och kontrollera att varje testpost finns exakt en gång med oförändrat innehåll.

Vad ska hända när flytten inte kan sparas?

I den här beställningen ska ett bekräftat avslag ge ett tydligt fel och återställa senast bekräftade ordning med alla poster kvar. Ett okänt utfall ska visas som osäkert och får inte kallas Sparad.

Källor och avgränsning