Praktisk lista för dra och ändra ordning
Bygg en lista där ordningen kan ändras med Drag and Drop API
Praktisk lista för dra och ändra ordning är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Översikt över mönstret
För att bygga en lista där objekt kan ordnas om genom att dras gör du varje objekt dragbart, lagrar det dragna objektets id i dataTransfer vid dragstart och infogar det dragna elementet före eller efter målobjektet vid släpp. DOM:en och modellen hålls synkroniserade om du återskapar ordningen från DOM:en efter varje släpp.
Markup
Rendera en platt lista där varje li har draggable="true" och ett data-id. När id:n finns på elementen behöver draghanterarna inte fråga ett separat state-lager för att identifiera objekten — själva elementet är sanningskällan.
<ul id="list">
<li draggable="true" data-id="1">Item 1</li>
<li draggable="true" data-id="2">Item 2</li>
<li draggable="true" data-id="3">Item 3</li>
</ul>dragstart registrerar källan
Vid dragstart lagrar du det dragna objektets id i dataTransfer och lägger till klassen "dragging" för visuell återkoppling. effectAllowed="move" talar om för webbläsaren att det handlar om en omordning, inte en kopiering, så att pekaren och dropEffect återspeglar en flyttoperation.
list.addEventListener("dragstart", (e) => {
const li = e.target.closest("li");
if (!li) return;
e.dataTransfer.setData("text/plain", li.dataset.id);
e.dataTransfer.effectAllowed = "move";
li.classList.add("dragging");
});dragover tillåter släppet
Lyssna på listan (händelsedelegering), anropa preventDefault och ange dropEffect till "move". Använd e.target.closest("li") för att hitta raden som pekas på, så att samma hanterare fungerar för hela listan.
Beräkna infogningspositionen
För att avgöra om det dragna objektet ska hamna ovanför eller nedanför raden som pekas på jämför du markörens Y-koordinat med radens vertikala mittpunkt: const before = (e.clientY - rect.top) < rect.height / 2. before=true betyder insertBefore och false betyder insertAfter.
function getInsertBefore(target, clientY) {
const rect = target.getBoundingClientRect();
return clientY < rect.top + rect.height / 2;
}drop ändrar ordningen i DOM:en
I släpphanteraren letar du upp det dragna elementet med hjälp av id:t och målraden under markören. Anropa list.insertBefore(dragged, target) eller list.insertBefore(dragged, target.nextSibling) beroende på vilken halva av målet som pekades på.
dragend rensar stilar
Oavsett om släppet lyckades eller om användaren tryckte på Escape utlöses dragend alltid på källan. Använd det för att ta bort klassen "dragging" och all markering av släppmål, så att listan återgår till viloläget.
list.addEventListener("dragend", () => {
list.querySelectorAll(".dragging, .over").forEach((el) => {
el.classList.remove("dragging", "over");
});
});Visuell släppindikator
Visa en tunn linje där objektet kommer att hamna med hjälp av ett CSS-pseudoelement på raden som pekas på. Växla linjen med klassen "over-top" eller "over-bottom", som dragover-hanteraren anger utifrån markörens position. Användaren ser infogningspunkten innan hen släpper.
Synkronisera modellen
Efter släppet härleder du den nya ordningen från DOM:en: const order = Array.from(list.children).map((li) => li.dataset.id). Skicka arrayen till servern eller lagra den i state — försök aldrig underhålla ett parallellt index bredvid DOM:en, eftersom det hamnar ur synkronisering vid snabba drag.
Tangentbordsalternativ
Lägg till Up/Down-hanterare som flyttar det fokuserade objektet med insertBefore. Meddela flytten via en aria-live-region ("Item moved up to position 2"). Tangentbordsanvändare får samma möjlighet utan att behöva använda det visuella draget, vilket är avgörande för tillgängligheten.
Pekvänligt alternativ
På mobila enheter ersätter du det inbyggda draget med Pointer Events: fånga raden vid pointerdown, flytta den med CSS-transform vid pointermove, och hitta raden under den med hit testing vid pointerup för att sedan ändra ordningen. Bibliotek som SortableJS kapslar in detta mönster för olika inmatningstyper.
Kunskapskontroll
Varför beräknar vi infogningspositionen utifrån markörens position i förhållande till den radens vertikala mittpunkt?
Sammanfattning
En robust lista för omordning kombinerar draggable="true" + dragstart (registrera id, effectAllowed=move) + dragover (preventDefault + indikatorposition) + drop (insertBefore vid den från mittpunkten härledda platsen) + dragend (rensning). Härled alltid den nya ordningen från DOM:en efter släppet och tillhandahåll ett tangentbordsalternativ för tillgänglighet.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Praktisk lista för dra och ändra ordning” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Praktisk lista för dra och ändra ordning”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Praktisk lista för dra och ändra ordning”?
Bygg en lista där ordningen kan ändras med Drag and Drop API Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Praktisk lista för dra och ändra ordning”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Attributet draggable och händelsen dragstart
- Händelserna dragover och drop
- Objektet dataTransfer
- Praktisk lista för dra och ändra ordning