Praktisk liste for dra-og-slipp-sortering
Bygg en liste som kan sorteres på nytt med Drag and Drop API
Praktisk liste for dra-og-slipp-sortering er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Mønsteroversikt
For å bygge en liste som kan omorganiseres ved draing, gjør hvert element dra-bart, lagre id-en til elementet som dras i dataTransfer ved dragstart, og sett det dratte elementet inn før eller etter mål-elementet ved slipp. DOM-en og modellen holdes synkronisert hvis rekkefølgen bygges på nytt fra DOM-en etter hvert slipp.
Markup
Render en flat liste der hvert li-element har draggable="true" og en data-id. Når id-ene ligger på elementene, trenger ikke drabehandlerne å spørre et separat tilstandslager for å identifisere elementene — selve elementet er fasiten.
<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 registrerer kilden
Ved dragstart lagrer du id-en til elementet som dras i dataTransfer og legger til klassen "dragging" for visuell tilbakemelding. effectAllowed="move" forteller nettleseren at dette er en omorganisering, ikke en kopiering, slik at markøren og dropEffect gjenspeiler en flytteoperasjon.
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 tillater slippet
Lytt på listen (hendelsesdelegering), kall preventDefault og sett dropEffect til "move". Bruk e.target.closest("li") for å finne raden som markøren befinner seg over, slik at den samme behandleren fungerer for hele listen.
Beregne innsettingsposisjonen
For å avgjøre om elementet som dras, skal plasseres over eller under raden som markøren befinner seg over, sammenligner du markørens Y-posisjon med radens vertikale midtpunkt: const before = (e.clientY - rect.top) < rect.height / 2. before=true betyr insertBefore, mens false betyr insertAfter.
function getInsertBefore(target, clientY) {
const rect = target.getBoundingClientRect();
return clientY < rect.top + rect.height / 2;
}drop omorganiserer DOM-en
I slippbehandleren finner du det dratte elementet ved hjelp av id-en og målraden under markøren. Kall list.insertBefore(dragged, target) eller list.insertBefore(dragged, target.nextSibling), avhengig av hvilken halvdel av målet markøren befant seg over.
dragend rydder opp i stilene
Uansett om slippet lykkes eller brukeren trykker på Escape, utløses dragend alltid på kilden. Bruk det til å fjerne klassen "dragging" og alle markeringer av slippmål, slik at listen går tilbake til hviletilstanden.
list.addEventListener("dragend", () => {
list.querySelectorAll(".dragging, .over").forEach((el) => {
el.classList.remove("dragging", "over");
});
});Visuell slippindikator
Vis en tynn linje der elementet vil bli plassert, ved hjelp av et CSS-pseudo-element på raden som markøren befinner seg over. Slå linjen av og på med klassen "over-top" eller "over-bottom", som dragover-behandleren setter basert på markørens posisjon. Da ser brukeren innsettingspunktet før slippet.
Synkronisere modellen
Etter slippet utleder du den nye rekkefølgen fra DOM-en: const order = Array.from(list.children).map((li) => li.dataset.id). Send arrayet til serveren eller lagre det i tilstanden — prøv aldri å vedlikeholde en parallell indeks ved siden av DOM-en, for den kommer ut av synkronisering ved raske drag.
Tastaturalternativ
Legg til behandlere for opp- og nedtastene som flytter elementet med fokus ved hjelp av insertBefore. Annonser flyttingen via et aria-live-område ("Elementet er flyttet opp til posisjon 2"). Tastaturbrukere får den samme funksjonaliteten uten å måtte bruke visuell draing, noe som er avgjørende for tilgjengelighet.
Berøringsvennlig reserve løsning
På mobile enheter kan du erstatte den opprinnelige drafunksjonen med Pointer Events: Ved pointerdown fanger du raden, ved pointermove flytter du den med CSS transform, og ved pointerup finner du raden under og omorganiserer elementene. Biblioteker som SortableJS kapsler inn dette mønsteret på tvers av inndatatyper.
Kunnskapssjekk
Hvorfor beregner vi innsettingsposisjonen ut fra markørens posisjon i forhold til det vertikale midtpunktet i raden som markøren befinner seg over?
Sammendrag
En robust liste for omorganisering kombinerer draggable="true" + dragstart (registrer id, effectAllowed=move) + dragover (preventDefault + indikatorposisjon) + drop (insertBefore på plassen som beregnes ut fra midtpunktet) + dragend (opprydding). Utled alltid den nye rekkefølgen fra DOM-en etter slippet, og tilby et tastaturalternativ av hensyn til tilgjengeligheten.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Praktisk liste for dra-og-slipp-sortering» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Praktisk liste for dra-og-slipp-sortering», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Praktisk liste for dra-og-slipp-sortering»?
Bygg en liste som kan sorteres på nytt med Drag and Drop API Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Praktisk liste for dra-og-slipp-sortering»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- draggable-attributtet og dragstart-hendelsen
- dragover- og drop-hendelser
- dataTransfer-objektet
- Praktisk liste for dra-og-slipp-sortering