HTML-elementen en bestanden slepen met Javascript

om een drop-effect te definiëren, moeten de volgende stappen worden gevolgd:

5.1. Bepaal de toegestane Dropeffecten op het Draggable Element in de dragstart Event Handler

met behulp van de eigenschap effectAllowed op de eigenschap datatransfer event definieert u alle dropeffecten die voor dat draggable element mogen worden toegepast.

Dit wordt gedaan omdat verschillende drop locaties kunnen worden gedefinieerd en verschillende drop effecten kunnen worden behandeld per drop locatie.,

De volgende tabel definieert de mogelijke effectAllowed eigendom waarden gebaseerd op MDN documenten:

5.2. Voor elke Drop locatie, Definieer de Drop Effect(s) voor het in zijn dragover Event Handler

het te definiëren drop effect moet een van de toegestane effecten bepaald op de dragStart event handler van de bron locatie.,

wanneer een drop-effect niet een van de toegestane drop-effecten is, wordt het ingesteld op een van de toegestane drop-effecten.

De dragover-handler, waar het drop-effect moet worden gedefinieerd, wordt uitgevoerd wanneer het gesleepte element over een mogelijke droplocatie wordt gesleept.

het volgende is een voorbeeld van het definiëren van de drop effecten voor een bepaalde drop locatie.

6) Definieer een Drop Zone (Drop locatie)

standaard staat geen element in het HTML-document een drop toe., Dat kan echter worden gewijzigd en om een element een drop zone te maken, moet het:

• De ondragover event handler hebben, die wordt uitgevoerd wanneer het draggable element over dit element wordt gesleept. In deze event handler, het drop-effect van de drop locatie wordt gedefinieerd als eerder vermeld in stap 5.2.
• de handler voor ondrop-gebeurtenissen, die wordt uitgevoerd wanneer het draggable-element in de sleeplocatie/ – zone wordt geplaatst.

het volgende is een voorbeeld van het definiëren van een element als een drop locatie.,

in zowel de dragover als de drop event handlers moet preventDefault() worden aangeroepen om een drop toe te staan, omdat het aangeeft dat een drop is toegestaan op die locatie.

als een drop alleen is toegestaan in bepaalde situaties waarin voorwaarden worden gebruikt, voeg dan alleen preventDefault toe als aan de voorwaarden voor het toestaan van een drop is voldaan. Dit wordt gedaan om te voorkomen dat het element een drop zone is als er niet aan voorwaarden wordt voldaan waar drop niet mag worden toegestaan.,

het weigeren van een drop op basis van het type sleepgegevens in de eigenschap dataTransfer is een veel voorkomend geval. Het volgende voorbeeld laat zien dat door alleen links te laten vallen in het drop zone element dat de dragover handler heeft.

7) behandel de Drop van het Element

tijdens de drop-gebeurtenis moeten de sleepgegevens worden verwerkt. Om dat te doen, wordt de methode getData() op de eigenschap datatransfer event gebruikt.,

de methode getData() haalt de sleepitems op omdat het een enkel argument van het type data nodig heeft om op te halen en het Retourneert de string waarde die ermee geassocieerd is.

de eigenschappen allowedEffect en dropEffect helpen bij het beheren van de feedback die aan de gebruiker zal worden gepresenteerd.

omgaan met dergelijke feedback is de verantwoordelijkheid van de ontwikkelaar en moet worden geïmplementeerd in de drop event handler. Bijvoorbeeld, het ophalen van een element en het toevoegen aan een andere ouder zal het verplaatsen, maar het kopiëren van de knoop zal resulteren in een kopie-effect.,

als meerdere drop-effecten zijn gedefinieerd voor een enkele drop-zone, moet de eigenschap dropEffect worden gebruikt om te bepalen welke sleepbewerking gewenst was voor deze specifieke drop-gebeurtenis.

het volgende is een voorbeeld van het afhandelen van een drop.

soms hebt u verschillende typen van dezelfde gegevens ondersteund, maar wilt u alleen het meest specifieke type ophalen. De volgende code van MDN docs laat dat zien.,

8) gebruik dragend Event om te controleren of Drop succesvol was

aan het einde van een sleepbewerking vuurt een dragend event bij het bronelement. Het evenement vuurt of de drag succesvol was of werd geannuleerd.

om te controleren of de sleepbewerking succesvol was of niet, kan de waarde van het dropEffect als volgt worden gecontroleerd:

• als de waarde van de eigenschap dropEffect “none” is in de handler voor dragend gebeurtenissen, betekent dit dat de sleepbewerkingen zijn geannuleerd.,
• anders is de waarde van de eigenschap dropEffect de bewerking die met succes is uitgevoerd.

Hmm, dus hoe is dit nuttig?

het bronelement kan deze informatie gebruiken na een succesvolle verplaatsbewerking om het gesleepte item van de oude locatie te verwijderen.

Demo bij slepen van HTML-elementen & Drop

opmerking: U kunt het project hier ook klonen vanuit mijn GitHub.,

1) Detect the Drag & Drop Feature Support in Your Browser

Before using the HTML drag & drop API, add feature detection code to ensure browser support.

The following code is the feature detection code for the HTML drag & drop API from Modernizr.,

2) Definieer een Drop Zone (Drop locatie)

standaard staat geen element in het HTML-document een drop toe. Dit kan echter worden gewijzigd en om een element een drop zone te maken, moet het:

• De ondragover event handler hebben, die wordt uitgevoerd wanneer het bestand(en) over de drop locatie wordt/worden gesleept.
• de handler voor ondrop-gebeurtenissen, die wordt uitgevoerd wanneer het / de Bestand(en) in de droplocatie wordt / worden geplaatst.,

zoals aangegeven door MDN docs:

dragstart en dragend gebeurtenissen worden niet afgevuurd bij het slepen van een bestand in de browser vanuit het besturingssysteem.

het volgende is een voorbeeld voor het definiëren van een element als een drop locatie.

3) behandel de Drop van het bestand

wanneer de gebruiker de bestanden in een Dropzone laat vallen, wordt een drop-gebeurtenis geactiveerd. Tijdens de drop event moeten de bestanden naar wens worden verwerkt.,

om toegang te krijgen tot elk verwijderd bestand, Gebruik de eigenschap DataTransfer van de gebeurtenis om toegang te krijgen tot de eigenschap files. Na het openen van een dropped bestand, Gebruik de File API om het te verwerken.

als de browser de eigenschap DataTransferItemList ondersteunt, kunt u deze gebruiken met de methode getAsFile() in plaats van de eigenschap DataTransfer te gebruiken om toegang te krijgen tot het bestand.

in zowel de dragover als de drop event handlers moet preventDefault () aangeroepen worden om een drop toe te staan, omdat het aangeeft dat een drop is toegestaan op die locatie., Het voorkomt ook dat het bestand wordt geopend, wat het standaardgedrag is dat optreedt bij het droppen van een bestand in een webpagina.

als een drop alleen is toegestaan in bepaalde situaties waarin voorwaarden worden gebruikt, voeg dan alleen preventDefault toe als aan de voorwaarden voor het toestaan van een drop is voldaan. Dit wordt gedaan om te voorkomen dat het element een drop zone is als er niet aan voorwaarden wordt voldaan waar drop niet mag worden toegestaan.

het volgende voorbeeld, uit MDN docs, toont het verwerken van gevallen bestanden, waarbij een sleepitem dat geen bestand is, wordt genegeerd., Both possible ways are demonstrated in this

Demo on HTML Element’s Drag & Drop

Note: you can also clone the project from my Github here.

---