Dra og slipp i HTML: Den komplette guiden

by
Tweet
Share
Share
Pin
0 Shares

Bruk av Dra-og-Slipp for Forbedret Brukeropplevelse

Dra-og-slipp-funksjonalitet er et kraftfullt verktøy som kan transformere brukerinteraksjon og bidra til en mer intuitiv og engasjerende brukeropplevelse. Enten du jobber med å utvikle en funksjon for filopplasting, en liste som kan sorteres, eller et interaktivt spill, er det en uvurderlig ferdighet for enhver nettutvikler å beherske bruken av dette API-et.

Grunnleggende om Dra-og-Slipp i HTML

Et typisk dra-og-slipp-system opererer med to hovedtyper av elementer. Den første typen er de flyttbare elementene som brukere kan manipulere med musen, mens den andre typen er slippbare elementer som definerer hvor brukerne kan plassere de flyttbare elementene.

For å aktivere dra-og-slipp, må du fortelle nettleseren hvilke elementer som skal være flyttbare. Du gjør et element flyttbart ved å sette `draggable`-attributtet til `true` slik som i eksemplet:

<div draggable="true">Dette elementet kan flyttes</div>

Når brukeren initierer en dra-operasjon, vil nettleseren vise et standard «spøkelsesbilde» som visuelt gir tilbakemelding om at elementet flyttes.

Dette standardbildet kan tilpasses. For å endre det, identifiser det flyttbare elementet i DOM, skap et nytt bilde som skal representere tilbakemeldingsbildet og legg til en `dragstart`-hendelseslytter, som vist nedenfor:

let img = new Image();
img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png";
document.querySelector('div').addEventListener('dragstart', (event) => {
  event.dataTransfer.setDragImage(img, 10, 10);
});

I kodesnutten ovenfor tar `setDragImage`-metoden tre parametre. Den første parameteren er bildet som skal brukes. De to neste er de horisontale og vertikale forskyvningene av bildet. Når denne koden kjøres i nettleseren og et element flyttes, vil du se at det standardiserte bilde erstattes av det tilpassede bildet.

For å tillate slipp av elementer, må du hindre nettleserens standardoppførsel ved å forhindre de innebygde effektene av `dragenter`- og `dragover`-hendelsene, slik:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
  ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
  ev.preventDefault();
});

Forstå DragEvent Grensesnittet

JavaScript benytter et `DragEvent`-grensesnitt for å representere en dra-og-slipp interaksjon som utføres av en bruker. Nedenfor er en oversikt over de forskjellige hendelsestypene som finnes innenfor dette grensesnittet:

  • `drag`: Denne hendelsen trigges gjentatte ganger mens brukeren drar et element.
  • `dragend`: Denne hendelsen utløses når en draoperasjon er fullført, enten ved at brukeren slipper elementet, eller ved at operasjonen avbrytes (f.eks. ved å trykke på ESC-tasten).
  • `dragenter`: Dette skjer når et element som dras, beveger seg inn i en gyldig slippsone.
  • `dragleave`: Denne hendelsen inntreffer når det dragbare elementet beveger seg ut av en slippsone.
  • `dragover`: Denne hendelsen trigges kontinuerlig mens et dragbart element befinner seg over en slippsone.
  • `dragstart`: Denne hendelsen utløses når en draoperasjon starter.
  • `drop`: Denne hendelsen inntreffer når brukeren slipper et element i en slippsone.

Det er verdt å merke seg at når filer dras fra eksterne miljøer, som operativsystemets filbehandling, til nettleseren, så vil ikke `dragstart` eller `dragend`-hendelsene bli trigget av nettleseren.

`DragEvent` kan brukes til å sende egendefinerte hendelser. For eksempel kan du lage en `div` som utløser egendefinerte hendelser ved innlasting av siden. Slik gjør du det: Først oppretter du en `DragEvent()`:

const customDragStartEvent = new DragEvent('dragstart', {
  dataTransfer: new DataTransfer(),
});
const customDragEndEvent = new DragEvent('dragend');

I kodesnutten ovenfor representerer `customDragStartEvent` en forekomst av `DragEvent()`. I `customDragStartEvent` er det to argumenter. Den første representerer hendelsestypen, som kan være en av de syv hendelsestypene. Den andre er et objekt med en `dataTransfer`-nøkkel, som representerer en forekomst av `DataTransfer`, som du vil lære mer om senere.

Deretter henter du elementet fra DOM som du vil utløse hendelsen fra:

const draggableElement = document.querySelector("#draggable");

Og legg til hendelseslyttere slik:

draggableElement.addEventListener('dragstart', (event) => {
  console.log('Drag started!');
  event.dataTransfer.setData('text/plain', 'Hello, world!');
});
draggableElement.addEventListener('dragend', () => {
  console.log('Drag ended!');
});

I den første hendelseslytteren logger tilbakeringingsfunksjonen teksten «Drag started!» og kaller på `setData`-metoden på `dataTransfer`-egenskapen på hendelsesobjektet. Nå kan du utløse de egendefinerte hendelsene slik:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Overføre Data med DataTransfer

`DataTransfer`-objektet fungerer som en bro mellom det dragbare elementet og slippsonen under en dra-og-slipp-operasjon. Det er en temporær lagringsenhet for data som skal deles mellom elementene.

Dataene kan ta ulike former, som tekst, URL-er eller egendefinerte datatyper, noe som gjør dette til et fleksibelt verktøy for å implementere en rekke dra-og-slipp-funksjonaliteter.

Bruke `setData()` for å Pakke Data

For å overføre data fra et dragbart element til et slippbart element, bruker du `setData()`-metoden. Denne metoden lar deg pakke dataene som skal overføres og spesifisere datatypen. Et eksempel:

element.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Når en bruker begynner å dra et element, pakker `setData()` teksten «Hello, world!» med datatypen `text/plain`. Disse dataene er nå knyttet til dra-hendelsen, og kan nås av slippsonen når brukeren slipper elementet.

Hente Data med `getData()`

På mottakersiden, i hendelseslytteren til et slippbart element, kan de overførte dataene hentes ved bruk av `getData()`-metoden:

element.addEventListener('drop', (event) => {
  const transferredData = event.dataTransfer.getData('text/plain');
  console.log(`Received data: ${transferredData}`);
});

Kodeblokken ovenfor henter dataene med den samme datatypen (`text/plain`) som ble satt med `setData()`. Dette lar deg få tilgang til og manipulere de overførte dataene etter behov.

Anvendelsesområder for Dra-og-Slipp Grensesnitt

Å integrere dra-og-slipp funksjonalitet i nettapplikasjonene dine kan være en betydelig forbedring, men det er viktig å forstå hvor og når det er hensiktsmessig å implementere det:

  • Filopplasting: Gi brukere muligheten til å dra filer direkte fra skrivebordet eller filbehandleren til et dedikert slippområde for å gjøre opplastingsprosessen smidigere.
  • Sorterbare lister: Hvis applikasjonen din omfatter lister, som for eksempel oppgavelister, spillelister eller bildegallerier, vil brukere sette pris på muligheten til å omorganisere elementer ved hjelp av dra-og-slipp.
  • Interaktive Dashbord: For datavisualiserings- og rapporteringsverktøy, kan dra-og-slipp være en effektiv metode for brukere å tilpasse sine dashbord ved å endre plassering på widgets og diagrammer.

Tilgjengelighet i Fokus

Dra-og-slipp kan være visuelt appellerende og forbedre brukeropplevelsen, men det er viktig å sikre at det er tilgjengelig for alle brukere, inkludert de med funksjonsnedsettelser. Sørg for å tilby alternative metoder for interaksjon, for eksempel tastaturkontroller, for å gjøre applikasjonen din inkluderende for alle.