Hvordan bruke HTML Dra og slipp API

Hvordan bruke HTML Dra og slipp API
Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

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, er det en avgjørende ferdighet å ha i verktøysettet for nettutvikling å forstå hvordan du kan utnytte mulighetene til dette API-et.





MUO Video av dagen RULL FOR Å FORTSETTE MED INNHOLD

Grunnleggende om dra og slipp i HTML

I et typisk dra-og-slipp-system er det to typer elementer: den første typen omfatter drabare elementer som brukere kan flytte med en mus, og den andre typen inkluderer slippbare elementer som vanligvis spesifiserer hvor brukere kan plassere et 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 drabar HTML-attributt satt til ekte , som dette:





 <div draggable="true">This element is draggable</div>

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.

Dra element med bilde

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 dra start 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.

Illustrasjon som viser tilpasset drabilde

Hvis du vil tillate et fall, må du forhindre standardoppførselen ved å avbryte begge mer utholdelig og Dragover 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.
  • bærer : 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.
  • mer utholdelig : 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.
  • Dragover : Når brukeren drar et element som kan dras over et slippmål, utløses hendelsen.
  • dra start : Hendelsen utløses ved starten av en draoperasjon.
  • miste : Brukeren utløser denne hendelsen når de slipper et element på et slippmål.