Hvordan bruke HTML Dra og slipp API

Dra og slipp er en viktig funksjon som forbedrer brukerinteraksjon og forenkler en sømløs brukeropplevelse. Enten du ønsker å bygge en filopplasting, en sorterbar liste eller et interaktivt spill, Å forstå hvordan du kan utnytte egenskapene til denne API-en er en avgjørende ferdighet å ha på nettet utviklingsverktøysett.

Grunnleggende om dra og slipp i HTML

I et typisk dra-og-slipp-system er det to typer elementer: den første typen består av drabare elementer som brukere kan bevege seg med en mus, og den andre typen inkluderer slippbare elementer som vanligvis spesifiserer hvor brukere kan plassere en element.

For å implementere dra og slipp, må du fortelle nettleseren hvilke elementer du ønsker skal kunne dras. For å gjøre et element kan dras av brukeren, må det elementet ha en drabarHTML-attributt satt til ekte, som dette:

<divdraggable="true">This element is draggablediv>

Når brukeren begynner å skyte en dra-hendelse, leverer nettleseren et standard "spøkelse"-bilde som vanligvis gir tilbakemelding angående et element som dras.

Du kan tilpasse dette bildet ved å oppgi ditt eget bilde i stedet. For å gjøre dette, velg det drabare elementet fra DOM, lag et nytt bilde for å representere det tilpassede tilbakemeldingsbildet, og legg til en drastart dra hendelseslytter slik:

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 kodeblokken ovenfor vises setDragImage Metoden har tre parametere. Den første parameteren refererer til bildet. De andre parameterne representerer henholdsvis horisontale og vertikale forskyvninger av bildet. Når du kjører koden i nettleseren og begynner å dra et element, vil du legge merke til at det tilpassede dragbildet er erstattet med det tilpassede bildet som er satt tidligere.

Hvis du vil tillate et fall, må du forhindre standardoppførselen ved å avbryte begge dragenter og draover hendelser, som dette:

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

Forstå DragEvent-grensesnittet

JavaScript har en DraEvent grensesnitt som representerer en dra-og-slipp-interaksjon fra brukeren. Nedenfor er en liste over mulige hendelsestyper under DraEvent grensesnitt.

• dra: Brukeren utløser denne hendelsen mens han drar et element.
• dragend: Denne hendelsen utløses når draoperasjonen avsluttes eller når brukeren avbryter den. En typisk draoperasjon kan avsluttes ved å slippe museknappen eller trykke på escape-tasten.
• dragenter: Et trukket element utløser denne hendelsen når det går inn i et gyldig slippmål.
• dragleave: Når elementet som dras forlater et slippmål, utløses denne hendelsen.
• draover: Når brukeren drar et element som kan dras over et slippmål, utløses hendelsen.
• drastart: Hendelsen utløses ved starten av en draoperasjon.
• miste: Brukeren utløser denne hendelsen når de slipper et element på et slippmål.

Når du drar en fil inn i nettleseren fra et miljø utenfor nettleseren (for eksempel operativsystemets filbehandling), utløser ikke nettleseren drastart eller dragend arrangementer.

DraEvent kan være nyttig hvis du ønsker å sende en egendefinert dra-hendelse programmatisk. For eksempel, hvis du ønsker å a div for å utløse egendefinerte dra-hendelser ved sideinnlasting, her er hvordan du gjør det. Først oppretter du en ny tilpasset DragEvent() som dette:

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

I kodeblokken ovenfor, customDragStartEvent representerer en forekomst av DragEvent(). I customDragStartEvent, er det to konstruktørargumenter. Den første representerer drag-hendelsestypen, som kan være en av de syv hendelsestypene nevnt tidligere.

Det andre argumentet er et objekt med en data overføring nøkkel som representerer en forekomst av Data overføring, som du vil lære mer om senere i denne veiledningen. Deretter tar du tak i elementet du vil utløse hendelsen fra, fra Document Object Model (DOM).

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

Legg så til, hendelseslytterne som dette:

 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 ovenfor logger tilbakeringingsfunksjonen teksten "Drag startet!" og påkaller setData metode på data overføring eiendom på begivenhet gjenstand. Nå kan du utløse de egendefinerte hendelsene slik:

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

Overføre data med dataoverføring

De data overføring objekt fungerer som en bro mellom kildeelementet (elementet som kan dras) og målelementet (slippområdet) under en dra-og-slipp-operasjon. Den fungerer som en midlertidig lagringsbeholder for data du vil dele mellom disse elementene.

Disse dataene kan ha ulike former, for eksempel tekst, URL-er eller egendefinerte datatyper, noe som gjør det til et allsidig verktøy for å implementere et bredt spekter av dra-og-slipp-funksjonalitet.

Bruke setData() til å pakke data

For å overføre data fra et element som kan dras til et slippbart element, bruker du setData() metode levert av data overføring gjenstand. Denne metoden lar deg pakke dataene du vil overføre og spesifisere datatypen. Her er et grunnleggende eksempel:

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

Når en bruker begynner å dra det angitte elementet, setData() pakker teksten "Hei, verden!" med datatypen tekst/vanlig. Disse dataene er nå knyttet til dra-hendelsen og kan nås av det slippbare målet under slippoperasjonen.

Henter data med getData()

På mottakersiden, i hendelseslytteren til et droppbart element, kan du hente de overførte dataene ved å bruke getData() metode:

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

Kodeblokken ovenfor henter dataene med samme datatype (tekst/vanlig) som ble satt ved hjelp av setData() metode tidligere. Dette lar deg få tilgang til og manipulere de overførte dataene etter behov innenfor det droppbare elementets kontekst.

Brukstilfeller for dra og slipp-grensesnitt

Å integrere dra-og-slipp-funksjonalitet i nettapplikasjonene dine kan være en kraftig forbedring, men det er viktig å forstå når og hvorfor du bør implementere det.

• Filopplastere: Å tillate brukere å dra filer direkte fra skrivebordet eller filbehandleren til et angitt slippområde forenkler opplastingsprosessen.
• Sorterbare lister: Hvis applikasjonen din involverer lister over elementer, for eksempel oppgavelister, spillelister eller bildegallerier, kan brukere sette pris på muligheten til å omorganisere elementer ved å dra og slipp.
• Interaktive instrumentbord: For datavisualisering og rapporteringsverktøy, kan dra og slipp være en effektiv måte for brukere å tilpasse dashbordene sine ved å omorganisere widgets og diagrammer.

Ha tilgjengelighet i tankene

Mens dra og slipp kan være visuelt tiltalende og forbedre brukeropplevelsen, er det avgjørende å sikre at implementeringen din forblir tilgjengelig for alle brukere, inkludert funksjonshemmede. Gi alternative metoder for interaksjon, for eksempel tastaturkontroller, for å gjøre applikasjonen din inkluderende.