HTML5 Drag and Drop

vanuit HTML5 is het mogelijk om HTML-elementen binnen een HTML-pagina te slepen en neer te zetten. Via JavaScript event listeners kunt u beslissen wat er gebeurt wanneer de gebruiker sleept en druppels elementen.

tijdens slepen en neerzetten kunnen HTML-elementen twee rollen aannemen:

1. Draggable
2. Drop target / drop zone.

het draggable element is het element dat de gebruiker in staat zou moeten zijn om rond de HTML-pagina te slepen en ergens neer te zetten, zodat er enige actie kan plaatsvinden. Dit kan een of meer elementen zijn.,

het drop doel of de drop zone is het element waarop de draggable elementen worden geplaatst.

Drag and Drop Events

om te bepalen wat er gebeurt bij het slepen en neerzetten van HTML-elementen, moet u 3 stappen uitvoeren:

1. Stel de HTML-elementen in op draggable.,
2. event listeners toevoegen aan de draggable HTML-elementen
3. event listeners toevoegen aan de drop target HTML-elementen

de gebeurtenissen en attributen worden hier geïllustreerd:

eerst stelt u het draggable="true" attribuut op de HTML-elementen in om draggable te maken.

ten tweede voegt u event listeners toe aan het draggable element voor de dragstart en dragend gebeurtenissen., Binnen deze event listeners kun je implementeren wat er gaat gebeuren wanneer de gebruiker het element begint te slepen, en wanneer het slepen eindigt.

ten derde voeg je event listeners toe aan het drop target element. De gebeurtenissen waar u naar kunt luisteren zijn dragenter, dragover, dragleave en drop.

de gebeurtenis dragenter wordt gestart wanneer de gebruiker de draggable naar het dropdoel sleept., Deze gebeurtenis vuurt alleen wanneer het draggable element verandert van buiten zijn naar over zijn, wat meestal wordt bepaald door de positie van de muiscursor.

zodra het draggable-element boven het drop-doel is, vuurt de gebeurtenis dragover en blijft branden zolang het draggable-element over het drop-doel wordt gesleept.

als de gebruiker het draggable object weer uit het dropdoel sleept, wordt de gebeurtenis dragleave geactiveerd.

als de gebruiker het draggable object op het dropdoel laat vallen, wordt de gebeurtenis drop gestart.,

Drag and Drop Event voorbeeld

Hier is een voorbeeld waarmee u kunt spelen. Probeer het HTML5-logo naar het dropdoel te slepen en kijk wat er gebeurt. Probeer zowel het laten vallen van de afbeelding en slepen het weer uit.

Slepen en Neerzetten van de Code

Laten we een kijkje nemen op hoe om te gaan met het slepen en neerzetten van de gebeurtenissen., Om te zien dat we eerst een <img> element aanmaken dat we kunnen slepen. Hier is de HTML code hiervoor:

<img src="http://tutorials.jenkov.com/html5/..." draggable="true">

zodra we een draggable element hebben hebben we een drop target nodig. Ik zal een <div> element gebruiken:

<div style="width: 200px; height: 200px;">Drop here</div>

zodra we het draggable element en het drop target element hebben, moeten we de event listeners toevoegen., Hier is de JavaScript-code hiervoor:

de dragStart() functie roept event.dataTransfer.setData() aan om de gegevens in te stellen die naar het drop-doel worden overgedragen wanneer het element wordt verwijderd. Welke gegevens je ook nodig hebt om de drop actie goed af te maken, Stel het hier in. U stelt zowel de gegevens als het mime-type in.

the dragOver () and drop() event handlers roepen beide event.preventDefault() aan en geven false terug. Dit is nodig om het slepen en neerzetten goed te laten werken., De browser kan een aantal standaard slepen en neerzetten gedrag dat u nodig hebt om uit te schakelen om uw code te laten werken.

merk ook op dat de functie drop() event handler de gegevensverzameling in dragStart() leest via de aanroep naar event.dataTransfer.getData(). Het geeft het MIME-type van de gegevens als parameter om het goed te extraheren.

Dit is alles wat nodig is om slepen en neerzetten in HTML5 te implementeren. Je kunt het echter een beetje meer visueel aangenaam maken, zoals we in de volgende sectie zullen zien.,

visuele Feedback

u kunt de functies voor het slepen en neerzetten van gebeurtenissen gebruiken om de gebruiker meer expliciete visuele feedback te geven.

allereerst kunt u het element dat wordt gesleept markeren zodat de gebruiker kan zien welk element hij of zij sleept. Als meerdere elementen er hetzelfde uitzien en ze allemaal kunnen worden gesleept, is het leuk voor de gebruiker om te zien welke wordt gesleept. U kunt dit doen als reactie op de gebeurtenis dragstart. Hier is een voorbeeld:

zodra de sleep eindigt, willen we de rand weer verwijderen., Dit wordt gedaan als reactie op de gebeurtenis dragend. Hier is hoe dat gedaan wordt:

nu krijgt de gebruiker visuele feedback die laat zien welk element gesleept wordt.

we willen de gebruiker ook laten zien dat het mogelijk is om het draggable element te laten vallen wanneer het over het drop doel wordt gesleept. Opnieuw zullen we de rand van het element veranderen. We zullen dit doen in reactie op de gebeurtenissen dragenter, dragleave en drop., Hier is hoe dat gedaan wordt:

nu wordt de rand van het drop-doel groen en onderbroken als het draggable-element eroverheen wordt gesleept. De rand zal worden verwijderd wanneer het draggable element weer naar buiten wordt gesleept, of als het element op het drop doel wordt geplaatst.

het voorbeeld hierboven liet de functie dragOver() event handler niet zien, maar zorg ervoor dat u deze toevoegt om het standaard browsergedrag te voorkomen.,

Hier is de volledige code nadat de visuele feedback is toegevoegd:

het object DataTransfer, effectenallowed, dropEffect en setDragImage ()

u kunt de visuele feedback die aan de gebruiker wordt gegeven tijdens slepen en neerzetten verhogen met behulp van het object DataTransfer. HetDataTransfer object heeft 2 attributen en één functie die u hiervoor kunt gebruiken., Dit zijn:

• effectenallowed
• dropEffect
• setDragImage ()

u hebt toegang tot het DataTransfer object in de dragstart en drop gebeurtenisobjecten. Hier is een voorbeeld dragstart listener functie die de effectsAllowed eigenschap op de DataTransfer object:

de effectsAllowed eigenschap wordt gebruikt door de browsers om de muiscursor te veranderen om te laten zien wat voor soort actie wordt uitgevoerd bij het slepen en een element laten vallen., Meestal verandert de muiscursor wanneer het gesleepte element zich boven een drop-doel bevindt. Niet eerder. Geldige waarden voor de effectsAllowed woning zijn:

• geen
• kopiëren
• verplaatsen
• copyMove
• link
• linkMove
• copyLink
• alle
• niet

De dropEffect wordt verondersteld om te laten zien dat de gebruiker (via de cursor) wat gebeurt er wanneer de muis over een drop doel, maar op het moment van schrijven (dec. 2014) de browsers lijken dit te negeren., Geldige waarden voor de eigenschapdropEffect zijn:

• none
• kopiëren
• link
• verplaatsen

de functie setDragImage(image, x, y) kan worden gebruikt om de afbeelding in te stellen die door de browser wordt getoond wanneer de gebruiker een element sleept. Standaard toont de browser een semi-transparante kopie van het originele element, maar als u een andere afbeelding wilt, kunt u met deze functie een andere afbeelding instellen. De eigenschappenx eny kunnen worden gebruikt om locatieverschuivingen voor de afbeelding in te stellen wanneer deze wordt weergegeven., Standaard bevindt de linkerbovenhoek van de sleepafbeelding zich aan het uiteinde van de muisaanwijzer. Door andere x en y eigenschappen in te stellen kunt u dit wijzigen. U kunt zowel positieve als negatieve x en y offsets gebruiken.

Hier is een voorbeeld van een code die laat zien hoe je een sleepafbeelding in de dragStart() event listener functie instelt:

Hier is een voorbeeld dat je laat spelen met de verschillende instellingen op het DataTransfer object., Probeer het veranderen van de effectsAllowed en sleep de afbeelding en kijk wat er gebeurt als u het HTML5 logo omlaag sleept over de div drop doel.

bestanden slepen naar de Browser

Het is mogelijk om bestanden vanuit het bestandssysteem naar de browser te slepen en de naam en inhoud van de gesleept bestanden van JavaScript te lezen. Je doet dit via de HTML5 File API., Hier is een drop doel luisteraar die de bestandsnaam van het gesleept bestand detecteert:

var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i 
 Notice how the 
 function does not call the 
 function, but instead accesses the 
 property of the 
. The 
 property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon).
 You can read more about how to access the dragged files in my HTML5 file API tutorial.