De HTML5 Drag and Drop API gebruiken

De HTML5 Drag and Drop (DnD) API betekent dat we bijna elk element op onze pagina versleepbaar kunnen maken. In dit bericht leggen we de basisprincipes van slepen uit. en neerzetten.

Versleepbare inhoud creëren #

Het is vermeldenswaard dat in de meeste browsers tekstselecties, afbeeldingen en links standaard versleepbaar zijn. Als u bijvoorbeeld de Google-logo op Google Zoeken ziet u de spookafbeelding. De afbeelding kan vervolgens worden neergezet in de adresbalk, een <input type="file" /> -element of zelfs op het bureaublad. Om andere soorten inhoud versleepbaar te maken je moet de HTML5 DnD APIs gebruiken.

Om een versleepbaar object draggable=true op dat element te zetten. Vrijwel alles kan worden versleept, afbeeldingen, bestanden , links, bestanden of andere markeringen op uw pagina.

In ons voorbeeld maken we een interface om enkele kolommen opnieuw te rangschikken, die zijn opgemaakt met CSS Grid. De basisopmaak voor mijn kolommen ziet eruit als dit, waarbij elke kolom de

attribuut ingesteld optrue.

Hier is de CSS voor mijn container- en boxelementen. Merk op dat de enige CSS gerelateerd aan DnD-functionaliteit is de cursor: move eigenschap. De rest van de code regelt alleen de lay-out en stijl van de container- en box-elementen.

Op dit punt zul je ontdek dat je de items kunt slepen, maar er gebeurt niets anders. Om de DnD-functionaliteit toe te voegen, hebben we de JavaScript-API nodig.

Luisteren naar het slepen van gebeurtenissen #

Er zijn een aantal van verschillende gebeurtenissen om aan te koppelen om het hele proces van slepen en neerzetten te bewaken.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

Om de DnD-stroom af te handelen, heb je een soort bronelement nodig (waar het slepen vandaan komt), de data pa yload (wat je probeert te laten vallen), en een doel (een gebied om de drop op te vangen). Het bronelement kan een afbeelding, lijst, link, bestandsobject, blok HTML, enz. zijn. Het doel is de neerzetzone (of set van neerzetzones) die de gegevens accepteert die de gebruiker probeert te verwijderen. Houd er rekening mee dat niet alle elementen doelen kunnen zijn, een afbeelding kan bijvoorbeeld “geen doelwit zijn.

Begin en einde een reeks met slepen en neerzetten #

Zodra u draggable="true" attributen heeft gedefinieerd in uw inhoud, voegt u een dragstart gebeurtenishandler toe om de DnD-reeks voor elke kolom te starten.

Deze code stelt de ondoorzichtigheid van de kolom in op 40% wanneer de gebruiker het begint te slepen, en zet het terug op 100% wanneer het slepen eindigt.

Het resultaat is te zien in de Glitch-demo hieronder. Sleep een item en het wordt ondoorzichtig.Aangezien het doel van het dragstart -evenement “het bronelement is, wordt this.style.opacity ingesteld op 40% geeft de gebruiker visuele feedback dat het element de huidige selectie is die wordt verplaatst. Zodra u het item neerzet, hoewel de dropfunctionaliteit niet aanwezig is, keert het bronelement terug naar 100% dekking.

Voeg extra visuele aanwijzingen toe met dragenter, dragover en dragleave #

Gebruik de dragenter, dragover en dragleave gebeurtenishandlers. In dit voorbeeld zijn de kolommen niet alleen versleepbaar, maar zijn de kolommen neerzetdoelen. om dit te begrijpen door de rand te laten stippelen wanneer ze een gesleept item over een kolom houden. In uw CSS kunt u bijvoorbeeld een over -klasse maken om elementen weer te geven die neerzetdoelen zijn:

Vervolgens, in uw J avaScript stelt de event handlers in, voeg de over class toe wanneer de kolom wordt gesleept, en verwijder deze wanneer we weggaan. In de dragend handler zorgen we er ook voor dat de klassen aan het einde van het slepen worden verwijderd.

Er zijn een paar punten die het waard zijn om in deze code te behandelen :

• In het geval van het slepen van zoiets als een link, moet u het standaardgedrag van de browser voorkomen, namelijk navigeren naar die link. Om dit te doen, roept u e.preventDefault() in de dragover -gebeurtenis. Een andere goede gewoonte is om false terug te sturen in dezelfde handler.
• De dragenter gebeurtenishandler wordt gebruikt om de over -klasse te wisselen in plaats van dragover .Als je dragover gebruikt, zou de CSS-klasse vaak worden omgeschakeld naarmate de gebeurtenis dragover bleef afgaan bij een zwevende kolom. dat zou de browser om een grote hoeveelheid onnodig werk te doen. Het is altijd een goed idee om het opnieuw tekenen tot een minimum te beperken.Als je de dragover -gebeurtenis ergens voor moet gebruiken, overweeg dan om je gebeurtenisluisteraar te beperken of te debounten.

De drop voltooien #

Om de daadwerkelijke verwijdering te verwerken, voegt u een gebeurtenislistener toe voor de drop -gebeurtenis. In de drop -handler moet u “voorkomen het standaardgedrag van de browser voor drops, wat meestal een soort vervelende omleiding is. Je kunt voorkomen dat de gebeurtenis opborrelt in de DOM door e.stopPropagation() aan te roepen.

Als u de code op dit punt uitvoert, zal het item niet naar de nieuwe locatie worden verplaatst. Om dit te bereiken moet u de DataTransfer object.

De eigenschap dataTransfer is waar alle DnD-magie plaatsvindt. Het bevat het stuk gegevens dat is verzonden tijdens een sleepactie. dataTransfer wordt ingesteld in de dragstart -gebeurtenis en gelezen / afgehandeld in de drop-gebeurtenis. Door e.dataTransfer.setData(mimeType, dataPayload) te bellen, kun je het object instellen “s MIME-type en gegevenspayload.

In dit voorbeeld laten we gebruikers de volgorde van de kolommen wijzigen. Om dat te doen, moet u eerst de HTML van het bronelement opslaan wanneer u sleept begint:

In de drop gebeurtenis die u verwerkt de kolomverplaatsing, waarbij de HTML van de bronkolom wordt ingesteld op de HTML van de doelkolom waarop u bent neergezet, en controleer eerst of de gebruiker niet terugvalt naar dezelfde kolom waaruit ze hebben gesleept.

U kunt zien het resultaat in de volgende demo.Sleep de A-kolom bovenaan de B-kolom en laat deze los en merk op hoe ze van plaats veranderen:

Meer sleepeigenschappen #

Het dataTransfer -object geeft eigenschappen weer om de gebruiker visuele feedback te geven tijdens het sleepproces. Deze eigenschappen kunnen ook worden gebruikt om te bepalen hoe elk neerzetdoel reageert op een bepaald gegevenstype.

• dataTransfer.effectAllowed restric is wat voor “type slepen” de gebruiker kan uitvoeren op het element. Het wordt gebruikt in het verwerkingsmodel voor slepen en neerzetten om de dropEffect te initialiseren tijdens de dragenter en dragover gebeurtenissen. De eigenschap kan worden ingesteld op de volgende waarden: none, copy, copyLink, copyMove, link, linkMove, move, all, en uninitialized.
• dataTransfer.dropEffect bepaalt de feedback die de gebruiker krijgt tijdens de dragenter en dragover events. Wanneer de gebruiker met de muis over een doelelement zweeft, zal de cursor van de browser aangeven welk type bewerking er zal plaatsvinden (bijv. een kopie, een verplaatsing, enz.). Het effect kan een van de volgende waarden aannemen: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) betekent dat in plaats van de browser te gebruiken ” s standaard “spookbeeld” -feedback, kunt u optioneel een sleeppictogram instellen.

Bestand uploaden met slepen en neerzetten #

Dit eenvoudige voorbeeld gebruikt een kolom als zowel bron slepen en doel slepen Dit kan worden gezien in een gebruikersinterface waar de gebruiker wordt gevraagd de items opnieuw te rangschikken. In sommige situaties kunnen het doel en de bron voor slepen verschillen, zoals een interface waar de gebruiker één afbeelding moet selecteren als hoofdafbeelding voor een product door de geselecteerde afbeelding naar een doel te slepen.

Slepen en neerzetten wordt vaak gebruikt om gebruikers toe te staan items van hun bureaublad naar een toepassing te slepen. Het belangrijkste verschil zit in uw drop handler. In plaats van dataTransfer.getData() te gebruiken om toegang te krijgen tot de bestanden, zullen hun gegevens zal worden opgenomen in de eigenschap dataTransfer.files:

U kunt meer informatie hierover vinden in Aangepast slepen en neerzetten.