HTML5 - Drag & Drop, deel 2

Al in het eerste deel van deze tutorial zagen we hoe je de sleep evenement door de elementen te slepen, dat wil zeggen, we deden een deel van het werk, we zagen hoe we konden omgaan met de verschillende gebeurtenissen van die eerste sectie.
Nu moeten we weten hoe we het gebied kunnen activeren waar het element moet worden gedeponeerd, het is al de aanvullende actie waarmee we volledige functionaliteiten op onze pagina kunnen bereiken.
Het stortingsgebied creëren
Dit is het gebied waar we de elementen die we slepen gaan verlaten, om dit gebied te manipuleren zullen we verschillende evenementen hebben, om beter te begrijpen hoe we met deze gebeurtenissen moeten omgaan, zullen we ze allemaal opsommen en uitleggen hoe het werkt .
Evenementen (bewerken)

• Drager: Het wordt geactiveerd wanneer een gesleept element de ruimte op het scherm binnenkomt die we hebben gedefinieerd voor het depotgebied.
• Overdragen: Het wordt geactiveerd wanneer het gesleepte element beweegt binnen het depotgebied dat we al hebben gedefinieerd.
• Dragleave: Het wordt geactiveerd op het moment dat een gesleept element het afleggebied verlaat.
• Afzetten: Het is de gebeurtenis die wordt geactiveerd wanneer een item in het afstortgebied wordt achtergelaten.

Het item ontvangen:
Zodra we weten welke evenementen we tot onze beschikking hebben, gaan we een eenvoudige code bouwen, waarin wanneer we een element dat we hebben gesleept laten vallen of deponeren, dit wordt weergegeven in het depotgebied.
Hiervoor gebruiken we enkele functies van de innerlijke HTML waar we het element gaan klonen dat in het gebied wordt gegooid.
Laten we de voorbeeldcode bekijken:

 Voorbeeld  
Hier neerzetten

Als we goed kijken, definiëren we het doelelement als het element dat het afzettingsgebied zal bevatten. Zodra dit is gedaan, definiëren we wat er zal gebeuren in elk van de gebeurtenissen, als we kijken naar de drop-evenement is waar de laatste stap plaatsvindt, hier zullen we het gesleepte element klonen en dankzij de innerlijke HTML we gaan het asynchroon laten zien wanneer we het element laten vallen dat we hebben gesleept.
Een ander ding waar we op moeten letten, is het overschrijven van de standaardgebeurtenis van de browser, we beheren dit bij het maken van de functie handvatSlepenOp deze manier voorkomen we dat de browser de instructies interpreteert op een manier die niet door ons wordt verwacht.
In onze browser zou het er als volgt uit moeten zien:

We zijn er eindelijk in geslaagd om een slepen, laten vallen in HTML5 zonder afhankelijk te zijn van externe bibliotheken, nu kunnen we met een beetje fantasie veel functionaliteiten maken, zoals een winkelwagentje dat alleen werkt met slepen, laten vallen.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven