HTML5 – Dra och släpp
Dra och släpp (DnD) är ett kraftfullt användargränssnittskoncept som gör det enkelt att kopiera, ändra ordning och radering av objekt med hjälp av musklick. Detta låter användaren klicka och hålla ner musknappen över ett element, dra den till en annan plats och släpp musknappen för att släppa elementet där.
För att uppnå dra och släpp-funktionalitet med traditionell HTML4, antingen måste utvecklare antingen behöva använda komplex JavaScript-programmering eller andra JavaScript-ramar som jQuery etc.
Nu kom HTML 5 med ett Drag and Drop (DnD) API som ger inbyggt DnD-stöd till webbläsaren det är mycket lättare att koda upp.
HTML 5 DnD stöds av alla större webbläsare som Chrome, Firefox 3.5 och Safari 4 etc.
Dra och släpp händelser
Det finns ett antal händelser som avfyras under olika steg i dra och släpp-operationen. Dessa händelser listas nedan –
| Sr. nr. | Händelser & Beskrivning |
|---|---|
| 1 |
dragstart Tänds när användaren börjar dra av objektet. |
| 2 |
dragenter Utlöses när musen först flyttas över målelementet medan ett drag förekommer. En lyssnare för detta evenemang bör ange om en dropp tillåts över den här platsen. Om det inte finns några lyssnare eller om lyssnarna inte utför några operationer är det inte tillåtet att släppa som standard. |
| 3 |
dragover Denna händelse avfyras när musen flyttas över ett element när ett drag förekommer. Mycket av tiden kommer operationen som sker under en lyssnare att vara densamma som dragenterhändelsen. |
| 4 |
dragleave Denna händelse avfyras när musen lämnar ett element medan ett drag förekommer. Lyssnare bör ta bort alla markerings- eller infogningsmarkörer som används för återkoppling. |
| 5 |
dra Tänds varje gång musen flyttas medan objektet dras. |
| 6 |
släpp Släpphändelsen avfyras på det element där släppet inträffade i slutet av dragoperationen. En lyssnare skulle vara ansvarig för att hämta data som dras och infoga den på släppplatsen. |
| 7 |
dragend Utlöses när användaren släpper musknappen medan han drar ett objekt. |
Obs – Observera att endast draghändelser avfyras; mushändelser som mousemove avfyras inte under en dragoperation.
DataTransfer-objektet
Eventlyssnarens metoder för alla dra och släpp-händelser accepterar händelseobjekt som har ett läsbart attribut kallat dataTransfer.
Event.dataTransfer returnerar DataTransfer-objekt som är associerat med händelsen enligt följande –
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
DataTransfer-objektet innehåller data om dra och släppoperation. Dessa data kan hämtas och ställas i termer av olika attribut associerade med DataTransfer-objekt som förklaras nedan –
| Sr. nr. | DataTransfer-attribut och deras beskrivning |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Returnerar en DOMStringList som visar de format som ställts in i dragstart-händelsen. Dessutom, om några filer dras kommer en av typerna att vara strängen ”Files”. |
| 4 |
dataTransfer.clearData () Tar bort data för de angivna formaten. Tar bort all data om argumentet utelämnas. |
| 5 |
dataTransfer.setData (format, data) Lägger till angivna data. |
| 6 |
data = dataöverföring.getData (format) Returnerar angiven data. Om det inte finns sådan data returnerar du den tomma strängen. |
| 7 |
dataTransfer.files Returnerar en FileList med eventuella filer som dras. |
| 8 |
dataTransfer.setDragImage (element, x, y) Använder det givna elementet för att uppdatera dragåterkopplingen och ersätter tidigare specificerad feedback. |
| 9 |
dataTransfer.addElement (element) Lägger till det givna elementet i lista över element som används för att återge dra-feedback. |
Dra och släpp-process
Följande är stegen som ska genomföras för att implementera dra och släpp-operation –
Steg 1 – Gör ett objekt dragbart
Här är steg som ska vidtas –
-
Om du vill dra ett element måste du ställa in attributet dragbar till true för det elementet.
-
Ställ in en händelselyssnare för dragstart som är tårar den data som dras.
-
Dragstart för händelselyssnaren ställer in de tillåtna effekterna (kopiera, flytta, länka eller någon kombination).
Följande är exemplet för att göra ett objekt dragbart –
Detta ger följande resultat –
Steg 2 – Släppa objektet
För att acceptera en släpp måste släppmålet lyssna på minst tre händelser.
-
Dragenterhändelsen, som används för att avgöra om släppmålet ska acceptera släppet . Om droppen ska accepteras måste denna händelse avbrytas.
-
Dragover-händelsen, som används för att bestämma vilken feedback som ska visas för användaren. Om händelsen avbryts uppdateras återkopplingen (vanligtvis markören) baserat på dropEffect-attributets värde.
-
Slutligen fallhändelsen, som tillåter den faktiska droppen ska utföras.
Följande är exemplet att släppa ett objekt i ett annat objekt –
Detta ger följande resultat –