JavaScript Dra og slipp

Sammendrag: i denne opplæringen lærer du om JavaScript dra og slipp API.

Innledning til JavaScript Drag and Drop API

HTML5 introduserte formelt dra-og-slipp-spesifikasjonen. De fleste moderne nettlesere har implementert innebygd dra og slipp basert på HTML5-spesifikasjonen.

Som standard kan bare bilde og tekst være drabar. For å dra et bilde holder du bare museknappen nede og deretter flytter det. For å dra teksten, må du markere litt tekst og dra den på samme måte som du ville dra et bilde.

HTML5-spesifikasjonen spesifiserer at nesten alle elementene kan dras. For å gjøre et element drarbart, legger du til draggable -egenskapen med verdien true i HTML-koden. For eksempel:

Code language: HTML, XML (xml)

Hendelser på drabare elementer

Når du drar et element, utløses disse hendelsene i følgende sekvens:

• dragstart
• drag
• dragend

Når du holder nede en museknapp og begynner å bevege musen, skyter hendelsen dragstart på det drabare elementet som du drar. Markøren endres til et ikke-slipp-symbol (en sirkel med en linje gjennom den) for å indikere at du ikke kan slippe elementet på seg selv.

Etter dragstart hendelse utløses, drag hendelsen utløses gjentatte ganger så lenge du drar elementet.

Og dragend hendelsen utløses når du slutter å dra elementet.

Målet for alle hendelser (e.target) er elementet som blir dratt.

Som standard , nettleseren endrer ikke utseendet til det drage elementet. Derfor kan du tilpasse utseendet basert på dine preferanser.

Hendelser på slippmål

Når du drar et element over et gyldig slippmål, utløses disse hendelsene i følgende rekkefølge:

• dragenter
• dragover
• dragleave eller drop

dragenter hendelsen utløses så snart når du drar elementet over et slippmål.

Etter dragenter hendelsen utløses, avvikes dragover hendelsen gjentatte ganger så lenge du drar elementet innenfor grensen til slippmålet.

Når du drar elementet utenfor grensen til slippmålet, dragover hendelsen slutter å skyte og dragleave hendelsen utløses.

Hvis du slipper elementet på målet, vil drop hendelsen utløses i stedet for dragleave hendelsen.

Målet ( ) av dragenter, dragover, dragleave, og drop hendelser er slippmålelementene.

Gyldig slippmål

Nesten alle elementene støtter slippmålhendelsene (dragenter, dragover, dragleave, og drop). De tillater imidlertid ikke å slippe som standard.

Hvis du slipper et element over et slippmål som ikke tillater slipp, vant drop -hendelsen t fire.

For å gjøre et element til et gyldig slippmål, kan du overstyre standardadferden til både dragenter og dragover hendelser ved å ringe event.preventDefault() -metoden i deres tilsvarende hendelsesbehandlere. (Se eksemplet for mer informasjon)

Overfør data ved hjelp av dataTransfer-objekt

For å overføre data i en dra-og-slipp-handling, bruker du dataTransfer objekt.

dataTransfer objektet er en egenskap for hendelsen. Den lar deg overføre data fra det drage elementet til slippmålet.

dataTransfer -objektet har to metoder: setData() og getData().

setData() lar deg sette draoperasjonens data til spesifisert format og data :

Code language: CSS (css)

Formatet kan være text/plain eller text/uri-list. Og dataene kan være en streng som representerer dataene som skal legges til i dragobjektet.

getData() -metoden henter dradata lagret av setData() -metoden.

getData() godtar ett argument:

Formatet kan være text/plain eller text/uri-list. getData() returnerer en streng som er lagret ved setData() -metoden eller en tom streng hvis draoperasjonen ikke inkluderer data.

Eksempel på dra-og-slipp-JavaScript

Vi utvikler følgende enkle dra-og-slipp-program for å demonstrere JavaScript-dra og slipp-API: n:

Opprett prosjektstruktur

Opprett først en ny mappe som heter drag-n-drop-basics. Inne i denne mappen, opprett to undermapper kalt css og js.

For det andre, opprett en ny fil kalt app.js i js -mappen, style.css i css mappe og index.html i drag-n-drop-basics -mappen.

For det tredje plasserer du lenken til style.css og skriptekode som lenker til app.js i index.html -filen slik:

Bygg index.html-filen

Plasser følgende kode i index.html -filen:

I denne index.html-filen, vi brukte .container -elementet for å justere overskriften og drop-targets -elementet.

Inne i drop-target-elementet, vi plassert tre div elementer med samme klasse box. Og vi plasserer et annet div-element med klassen item i den første boksen.

Hvis du åpner index.html og prøv å dra den gule boksen, du vil se markøren som indikerer at du ikke kan dra:

For å gjøre elementet drabart, legger du til draggable -egenskapen med verdien true til HTML-koden som følger:

Code language: JavaScript (javascript)

Nå, hvis du lagrer index.html, åpner du den i nettleseren igjen ser du at du kan dra elementelementet slik:

Håndter hendelser på det drabare elementet

style.css -filen har .hide klasse som skjuler et element:

Code language: CSS (css)

I app.js -filen legger du til følgende kode:

Hvordan jeg t fungerer:

• Velg først det drabare elementet ved hjelp av querySelector().
• For det andre, legg til en dragstart hendelsesbehandler til det drabare elementet.
• For det tredje definerer du dragStart() -funksjonen for å håndtere dragstart hendelse.

Hvis du åpner index.html-filen og begynner å dra det drabare elementet, ser du drag starts... -meldingen konsollen.

I dragStart hendelsesbehandler må du lagre id til det drabare elementet. Og du må skjule det:

Hvis du drar elementet, ser du at det forsvinner når du begynner å dra.

For å løse dette bruker du setTimeout() -funksjon:

Nå kan du dra det dragbare elementet ut av dets opprinnelige posisjon:

Håndter hendelser på slippmål

Style.css-filen har også en CSS-klasse kalt .drag-over som gjør kantstilen til slippmålet til stiplet og rødt:

Code language: CSS (css)

I app.js trenger du for å velge slippmålelementene og håndtere dragenter, dragover, dragleave og drop hendelser av disse elementene:

Rammestilen til slippmålet bør endres når dragenter og dragover hendelse oppstår. Den skal gjenopprette stilen når dragleave og drop hendelsen oppstår.

For å gjøre det, legger du til og fjerner drag-over klassen til drop målet slik:

Nå, hvis du drar det drabare elementet til en annen dråpe mål, vil du se at grensen til slippmålet endres som vist på følgende bilde:

For å gjøre slippmålet gyldig, må du ringe event.preventDefault() i dragenter og dragover hendelsesbehandlere som dette:

Hvis du ikke gjør dette, vil drop hendelsen aldri utløses fordi div -elementet ikke er et gyldig slippmål som standard.

Hvis du drar det drabare elementet til et slippmål, ser du at markøren endringer som indikerer at du kan slippe elementet:

Nå, hvis du slipper elementet, vil du se at det forsvinner umiddelbart.

For å løse dette problemet, må du legge til håndtere drop hendelsen.

• Først får du id til det dragbare elementet ved hjelp av getData() -metoden til dataTransfer objekt.
• For det andre, legg til det dragbare elementet som et underordnet element i slippmålelementet.
• For det tredje fjerner du hide klasse fra draggable -elementet.

Følgende kode viser hele drop hendelsesbehandler:

Hvis du drar og slipper det drabare elementet nå, skal det fungere som forventet.

Følgende viser hele app.js-filen:

Og her er lenken til demoen.

Sammendrag

• Legg til draggable -egenskapen med verdien sann til et element for å gjøre det drabart.
• dragstart, drag og dragend hendelser avfyrer det drabare elementet.
• dragenter, dragover, eller drop hendelser brenner mot slippmålet.
• Ring event.preventDefault() på dragenter og dragover hendelsesbehandlere for å gjøre et element til et gyldig slippmål.
• Bruk event.dataTransfer objekt med setData() og getData() metodene for å overføre data i dra og slipp-operasjonen.