HTML5 – Drag & drop
Slepen en neerzetten (DnD) is een krachtig gebruikersinterfaceconcept dat het gemakkelijk maakt om te kopiëren, opnieuw te ordenen en te verwijderen van items met behulp van muisklikken. Hierdoor kan de gebruiker de muisknop ingedrukt houden op een element, het naar een andere locatie slepen en de muisknop loslaten om het element daar neer te zetten.
Om slepen en neerzetten te bereiken met traditionele HTML4, ontwikkelaars zouden ofwel complexe JavaScript-programmering of andere JavaScript-frameworks zoals jQuery enz. moeten gebruiken.
Nu kwam HTML 5 met een Drag and Drop (DnD) API die native DnD-ondersteuning biedt voor het maken van browsers het is veel gemakkelijker om te coderen.
HTML 5 DnD wordt ondersteund door alle grote browsers zoals Chrome, Firefox 3.5 en Safari 4 enz.
Gebeurtenissen slepen en neerzetten
Er zijn een aantal gebeurtenissen die worden geactiveerd tijdens verschillende fasen van het slepen en neerzetten. Deze gebeurtenissen worden hieronder vermeld –
| Sr.No. | Gebeurtenissen & Beschrijving |
|---|---|
| 1 |
dragstart Brandt wanneer de gebruiker het object begint te slepen. |
| 2 |
dragenter Wordt geactiveerd als de muis voor het eerst over het doelelement wordt bewogen terwijl er een sleep optreedt. Een luisteraar voor deze gebeurtenis moet aangeven of een drop over deze locatie is toegestaan. Als er geen luisteraars zijn, of de luisteraars voeren geen bewerkingen uit, dan is een drop niet standaard toegestaan. |
| 3 |
dragover Deze gebeurtenis wordt geactiveerd als de muis over een element wordt bewogen terwijl er een drag plaatsvindt. De bewerking die plaatsvindt tijdens een luisteraar zal meestal hetzelfde zijn als de gebeurtenis dragenter. |
| 4 |
dragleave Deze gebeurtenis wordt geactiveerd wanneer de muis een element verlaat terwijl het slepen plaatsvindt. Luisteraars moeten markeringen of invoegingen die worden gebruikt voor drop-feedback verwijderen. |
| 5 |
drag Brandt elke keer dat de muis wordt verplaatst terwijl het object wordt gesleept. |
| 6 |
drop De drop-gebeurtenis wordt geactiveerd op het element waar de drop plaatsvond aan het einde van het slepen. Een luisteraar zou verantwoordelijk zijn voor het ophalen van de gegevens die worden gesleept en deze invoegen op de neerzetlocatie. |
| 7 |
dragend Brandt wanneer de gebruiker de muisknop loslaat tijdens het slepen van een object. |
Opmerking – Merk op dat alleen sleepgebeurtenissen worden geactiveerd; muisgebeurtenissen zoals mousemove worden niet geactiveerd tijdens een sleepbewerking.
Het DataTransfer-object
De gebeurtenislistener-methoden voor alle slepen en neerzetten-evenementen accepteren Event-object met een alleen-lezen attribuut genaamd dataTransfer.
De event.dataTransfer retourneert het DataTransfer-object dat aan de gebeurtenis is gekoppeld als volgt –
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
Het DataTransfer-object bevat gegevens over het slepen en drop-operatie. Deze gegevens kunnen worden opgehaald en ingesteld in termen van verschillende attributen die zijn gekoppeld aan het DataTransfer-object, zoals hieronder wordt uitgelegd –
| Sr.No. | DataTransfer-attributen en hun beschrijving |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Geeft als resultaat een DOMStringList met de formaten die zijn ingesteld in de dragstart-gebeurtenis. Bovendien, als er bestanden worden gesleept, is een van de typen de tekenreeks “Bestanden”. |
| 4 |
dataTransfer.clearData () Verwijdert de gegevens van de gespecificeerde formaten. Verwijdert alle gegevens als het argument wordt weggelaten. |
| 5 |
dataTransfer.setData (format, data) Voegt de gespecificeerde data toe. |
| 6 |
data = dataTransfer.getData (format) Retourneert de gespecificeerde gegevens. Als er geen dergelijke gegevens zijn, retourneert de lege string. |
| 7 |
dataTransfer.files Geeft een bestandslijst terug van de bestanden die worden gesleept, indien aanwezig. |
| 8 |
dataTransfer.setDragImage (element, x, y) Gebruikt het gegeven element om de sleepfeedback bij te werken en vervangt alle eerder gespecificeerde feedback. |
| 9 |
dataTransfer.addElement (element) Voegt het gegeven element toe aan de lijst met elementen die worden gebruikt om de sleepfeedback weer te geven. |
Proces slepen en neerzetten
Hieronder volgen de stappen die moeten worden uitgevoerd om slepen en neerzetten te implementeren –
Stap 1 – Een object versleepbaar maken
Hier zijn de te nemen stappen –
-
Als je een element wilt slepen, moet je het versleepbare attribuut voor dat element op true instellen.
-
Stel een gebeurtenislistener in voor dragstart die vernietigt de gegevens die worden gesleept.
-
De sleepstart van de gebeurtenisluisteraar stelt de toegestane effecten in (kopiëren, verplaatsen, koppelen of een combinatie).
Hieronder volgt het voorbeeld om een object versleepbaar te maken –
Dit zal het volgende resultaat opleveren –
Stap 2 – Het object laten vallen
Om een drop te accepteren, moet het drop-doel naar ten minste drie gebeurtenissen luisteren.
-
De dragenter-gebeurtenis, die wordt gebruikt om te bepalen of het drop-doel de drop accepteert of niet. . Als het neerzetten moet worden geaccepteerd, moet deze gebeurtenis worden geannuleerd.
-
De sleepover-gebeurtenis, die wordt gebruikt om te bepalen welke feedback aan de gebruiker moet worden getoond. Als het evenement wordt geannuleerd, wordt de feedback (meestal de cursor) bijgewerkt op basis van de waarde van het kenmerk dropEffect.
-
Ten slotte is er het drop-evenement, waarmee de daadwerkelijke drop uit te voeren.
Hieronder volgt het voorbeeld om een object in een ander object neer te zetten –
Dit zal het volgende resultaat opleveren –