HTML5 – Træk og slip
Træk og slip (DnD) er et kraftigt brugergrænsefladekoncept, der gør det nemt at kopiere, omarrangere og slette af genstande ved hjælp af museklik. Dette giver brugeren mulighed for at klikke og holde museknappen nede over et element, trække den til en anden placering og slippe museknappen for at slippe elementet der.
For at opnå træk og slip-funktionalitet med traditionel HTML4, enten skulle udviklere enten skulle bruge kompleks JavaScript-programmering eller andre JavaScript-rammer som jQuery osv.
Nu kom HTML 5 op med en Drag and Drop (DnD) API, der bringer native DnD-support til browseren, hvilket gør det er meget nemmere at kode op.
HTML 5 DnD understøttes af alle de store browsere som Chrome, Firefox 3.5 og Safari 4 osv.
Træk og slip begivenheder
Der er et antal begivenheder, der affyres i forskellige faser af træk og slip-operationen. Disse begivenheder er angivet nedenfor –
| Sr.Nr. | Begivenheder & Beskrivelse |
|---|---|
| 1 |
trækstart Udløses, når brugeren begynder at trække objektet. |
| 2 |
dragenter Udløses, når musen først flyttes over målelementet, mens en træk forekommer. En lytter til denne begivenhed skal angive, om et fald er tilladt over denne placering. Hvis der ikke er nogen lyttere, eller lytterne ikke udfører nogen handlinger, er et fald som standard ikke tilladt. |
| 3 |
dragover Denne begivenhed udløses, når musen flyttes over et element, når der trækkes. Meget af tiden vil den handling, der finder sted under en lytter, være den samme som dragenter-begivenheden. |
| 4 |
dragleave Denne begivenhed udløses, når musen efterlader et element, mens en træk forekommer. Lyttere skal fjerne markerings- eller indsættelsesmarkører, der bruges til drop-feedback. |
| 5 |
træk Udløses hver gang musen flyttes, mens objektet trækkes. |
| 6 |
drop Drop-begivenheden affyres på det element, hvor dropet fandt sted i slutningen af trækoperationen. En lytter er ansvarlig for at hente de data, der trækkes, og indsætte dem på placeringen. |
| 7 |
dragend Udløses, når brugeren slipper museknappen, mens han trækker et objekt. |
Bemærk – Bemærk, at kun trækbegivenheder udløses; mushændelser som f.eks. musemove affyres ikke under en trækoperation.
DataTransfer-objektet
Begivenhedslyttermetoderne til alle træk og slip-begivenheder accepterer begivenhedsobjekt, der har en readonly-attribut kaldet dataTransfer.
Event.dataTransfer returnerer DataTransfer-objekt tilknyttet begivenheden som følger –
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
DataTransfer-objektet indeholder data om træk og slip operation. Disse data kan hentes og indstilles i form af forskellige attributter, der er knyttet til DataTransfer-objekt som forklaret nedenfor –
| Sr.-nr. | DataTransfer-attributter og deres beskrivelse |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Returnerer en DOMStringList, der viser de formater, der blev indstillet i trækstartshændelsen. Derudover, hvis nogen filer trækkes, vil en af typerne være strengen “Filer”. |
| 4 |
dataTransfer.clearData () Fjerner dataene i de angivne formater. Fjerner alle data, hvis argumentet udelades. |
| 5 |
dataTransfer.setData (format, data) Tilføjer de angivne data. |
| 6 |
data = dataTransfer.getData (format) Returnerer de angivne data. Hvis der ikke er sådanne data, returneres den tomme streng. |
| 7 |
dataTransfer.files Returnerer en filliste over de filer, der trækkes, hvis nogen. |
| 8 |
dataTransfer.setDragImage (element, x, y) Bruger det givne element til at opdatere trækfeedbacken og erstatte tidligere specificeret feedback. |
| 9 |
dataTransfer.addElement (element) Føjer det givne element til liste over elementer, der bruges til at gengive trækfeedback. |
Træk og slip proces
Følgende er de trin, der skal udføres for at implementere træk og slip-operation –
Trin 1 – Gør et objekt, der kan trækkes
Her er trin, der skal tages –
-
Hvis du vil trække et element, skal du indstille trækbar attribut til sand for det element.
-
Indstil en begivenhedslytter til trækstart, der er tårer de data, der trækkes.
-
Begivenhedslytterens trækstart indstiller de tilladte effekter (kopi, flyt, link eller en kombination).
Følgende er eksemplet for at gøre et objekt til at trække –
Dette vil give følgende resultat –
Trin 2 – Droppe objektet
For at acceptere en drop skal drop target lytte til mindst tre begivenheder.
-
Dragenter-begivenheden, som bruges til at bestemme, om drop target skal acceptere drop . Hvis drop skal accepteres, skal denne begivenhed annulleres.
-
Dragover-begivenheden, som bruges til at bestemme, hvilken feedback der skal vises til brugeren. Hvis begivenheden annulleres, opdateres feedbacken (typisk markøren) baseret på dropEffect-attributets værdi.
-
Endelig er drop-begivenheden, som tillader den faktiske drop skal udføres.
Følgende er eksemplet med at droppe et objekt i et andet objekt –
Dette giver følgende resultat –