HTML5 – Dra og slipp
Dra og slipp (DnD) er et kraftig brukergrensesnittkonsept som gjør det enkelt å kopiere, omorganisere og slette av gjenstander ved hjelp av museklikk. Dette lar brukeren klikke og holde museknappen nede over et element, dra den til et annet sted og slippe museknappen for å slippe elementet der.
For å oppnå dra og slipp-funksjonalitet med tradisjonell HTML4, Enten må utviklere enten måtte bruke kompleks JavaScript-programmering eller andre JavaScript-rammer som jQuery osv.
Nå kom HTML 5 opp med et Drag and Drop (DnD) API som gir innfødt DnD-støtte til nettleseren det er mye lettere å kode opp.
HTML 5 DnD støttes av alle de store nettleserne som Chrome, Firefox 3.5 og Safari 4 osv.
Dra og slipp hendelser
Det er antall hendelser som avfyres i forskjellige stadier av dra og slipp-operasjonen. Disse hendelsene er oppført nedenfor –
| Sr.Nr. | Hendelser & Beskrivelse |
|---|---|
| 1 |
dragstart Utløses når brukeren begynner å dra av objektet. |
| 2 |
dragenter Utløses når musen først flyttes over målelementet mens en drag forekommer. En lytter til dette arrangementet bør indikere om det er tillatt å droppe over dette stedet. Hvis det ikke er noen lyttere, eller lytterne ikke utfører noen operasjoner, er ikke slipp som standard tillatt. |
| 3 |
dragover Denne hendelsen utløses når musen flyttes over et element når en drag forekommer. Mye av tiden vil operasjonen som skjer under en lytter være den samme som dragenter-hendelsen. |
| 4 |
dragleave Denne hendelsen utløses når musen forlater et element mens en drag forekommer. Lyttere bør fjerne markerings- eller innsettingsmarkører som brukes for tilbakemelding. |
| 5 |
dra Utløses hver gang musen flyttes mens objektet blir dratt. |
| 6 |
slipp Slipphendelsen utløses på elementet der slippingen skjedde på slutten av draoperasjonen. En lytter vil være ansvarlig for å hente dataene som blir dratt og sette dem inn på slippstedet. |
| 7 |
dragend Utløses når brukeren slipper museknappen mens han drar et objekt. |
Merk – Merk at bare drahendelser utløses; mushendelser som musemove utløses ikke under en draoperasjon.
DataTransfer Object
Hendelseslyttemetodene for alle dra og slipp-hendelser aksepterer hendelsesobjekt som har et skrivebeskyttet attributt kalt dataTransfer.
Event.dataTransfer returnerer DataTransfer-objekt tilknyttet hendelsen som følger –
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
DataTransfer-objektet inneholder data om dra og slippoperasjon. Disse dataene kan hentes og settes i forhold til forskjellige attributter knyttet til DataTransfer-objektet som forklart nedenfor –
| Sr.-nr. | DataTransfer-attributter og beskrivelsen |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Returnerer en DOMStringList som viser formatene som ble angitt i dragstart-hendelsen. I tillegg, hvis noen filer blir dratt, vil en av typene være strengen «Files». |
| 4 |
dataTransfer.clearData () Fjerner dataene i de angitte formatene. Fjerner alle data hvis argumentet er utelatt. |
| 5 |
dataTransfer.setData (format, data) Legger til de angitte dataene. |
| 6 |
data = dataoverføring.getData (format) Returnerer de angitte dataene. Hvis det ikke er slike data, returnerer du den tomme strengen. |
| 7 |
dataTransfer.files Returnerer en filliste over filene som eventuelt blir dratt. |
| 8 |
dataTransfer.setDragImage (element, x, y) Bruker det gitte elementet til å oppdatere dra-tilbakemeldingen, og erstatter tidligere spesifisert tilbakemelding. |
| 9 |
dataTransfer.addElement (element) Legger til det gitte elementet i liste over elementer som brukes til å gi tilbakemelding på dra. |
Dra og slipp-prosess
Følgende er trinnene som skal utføres for å implementere dra og slipp-operasjon –
Trinn 1 – Gjøre et objekt som kan trekkes
Her er trinn som skal tas –
-
Hvis du vil dra et element, må du sette dragbar attributt til true for det elementet.
-
Angi en hendelseslytter for dragstart som er tårer dataene som blir dratt.
-
Dragstart for hendelseslytteren angir de tillatte effektene (kopier, flytt, lenke eller en kombinasjon).
Følgende er eksemplet for å gjøre et objekt drabart –
Dette vil gi følgende resultat –
Trinn 2 – Slippe objektet
For å godta et slipp, må slippmålet lytte til minst tre hendelser.
-
Dragenterhendelsen, som brukes til å bestemme om slippmålet skal godta slipp eller ikke. . Hvis slipp skal aksepteres, må denne hendelsen avbrytes.
-
Dragoverhendelsen, som brukes til å bestemme hvilken tilbakemelding som skal vises til brukeren. Hvis hendelsen blir avbrutt, oppdateres tilbakemeldingen (vanligvis markøren) basert på verdien dropEffect-attributt.
-
Til slutt fallhendelsen, som tillater den faktiske slipp skal utføres.
Følgende er eksemplet for å slippe et objekt i et annet objekt –
Dette vil gi følgende resultat –