De HTML5 drag-and-drop (DnD) API betekent dat bijna elk element op een pagina sleepbaar kan worden. In dit artikel behandelen we de basis van drag and drop.
Maak sleepbare content
Het is goed om te weten dat in de meeste browsers tekstselecties, afbeeldingen en links standaard slepbaar zijn. Als je bijvoorbeeld het Google-logo sleept in Google Zoekopdracht, zie je een spookafbeelding. De afbeelding kan vervolgens worden gesleept en neergezet in de adresbalk, <invoertype="bestand" /> element, of zelfs op het bureaublad. Om andere soorten content sleepbaar te maken, moet je de HTML5 DnD API gebruiken.
Om een object sleepbaar te maken, stel je het element indraggable=waar。 Slepen kan worden ondersteund voor bijna elk element, inclusief afbeeldingen, bestanden, links, bestanden of elke opmaak op een pagina.
In ons voorbeeld maken we een interface om enkele kolommen te herschikken, die zijn ingedeeld via CSS Grid. De basismarkering voor deze kolommen wordt hieronder getoond, waarbij de draggable eigenschap voor elke kolom op waar wordt gezet.
Hier is de CSS voor mijn container- en box-elementen. Let op dat de enige CSS die gerelateerd is aan DnD-functionaliteit de cursor: move-eigenschap is. De rest van de code regelt alleen de lay-out en stijl van de container- en boxelementen.
Op dit punt zie je dat je het item kunt slepen, maar dat er verder niets gebeurt. Om DnD-functionaliteit toe te voegen, moeten we de JavaScript API gebruiken.
Luister naar drag-evenementen
Er kunnen veel verschillende gebeurtenissen worden gekoppeld om het hele sleep-en-neerzetten-proces te monitoren.
- Dragstart
- slepen
- dragenter
- dragleave
- Dragover
- druppel
- dragend
Om een DnD-stroom te verwerken, heb je een soort bronelement nodig (het startpunt van de sleep), de datapayload (wat je probeert te plaatsen) en het doel (het gebied waar de snap plaatst). Bronelementen kunnen afbeeldingen, lijsten, links, bestandsobjecten, HTML-blokken, enzovoort zijn. Het doel is om de dropzone (of set dropzones) van de data te accepteren die de gebruiker probeert te plaatsen. Houd er rekening mee dat niet alle elementen doelen kunnen zijn, bijvoorbeeld kunnen beelden geen doelen zijn.
Start en beëindig de sleep-en-neerzet-sequentie
Na het definiëren van de draggable="true" eigenschap op de inhoud, voeg je een dragstart-gebeurtenishandler toe om de DnD-sequentie voor elke kolom te starten.
Deze code stelt de dekking van de kolom in op 40% wanneer de gebruiker begint met slepen, en zet deze vervolgens terug naar 100% aan het einde van het sleepevent.
De resultaten zijn te zien in de Glitch-demo hieronder. Sleep een item en het wordt ondoorzichtig. Omdat het dragstart-event zich richt op het bronelement, geeft het instellen van this.style.opacity op 40% de gebruiker visuele feedback dat het momenteel geselecteerde element beweegt. Nadat het item is geplaatst, keert het bronelement terug naar 100% opaciteit, hoewel de plaatsingsfunctie nog niet is geschreven.
Gebruik dragenter, dragover en dragleave om extra visuele aanwijzingen toe te voegen
Om gebruikers te helpen begrijpen hoe ze met je interface kunnen interageren, gebruik je dragenter, dragover en dragleave event handlers. In het volgende voorbeeld kunnen de kolommen worden gesleept of getarget. Om gebruikers dit te laten begrijpen: wanneer de gebruiker een item langs een kolom sleept, wordt de rand van die kolom een stippellijn. Je kunt bijvoorbeeld een overclass in CSS maken om een element te representeren dat een placement target is:
Stel vervolgens een event handler in JavaScript in om de overclass toe te voegen bij het slepen langs een kolom en deze te verwijderen bij het verlaten. In de dragend-handler willen we er ook voor zorgen dat de klasse aan het einde van de drag wordt verwijderd.
Er zijn een paar punten om in deze code te vermelden:
Bij het slepen van een element zoals een link moet je het standaardgedrag van de browser blokkeren, namelijk naar die link navigeren. Om dit te doen, roep e.preventDefault() aan in het dragover-evenement. Een andere goede praktijk is om false terug te geven in dezelfde handler.
Gebruik de dragenter event handler om over klassen te wisselen, niet om over te dragoveren. Als je dragover gebruikt, wordt de CSS-klasse meerdere keren geschakeld omdat de event dragover blijft triggeren wanneer de kolom zweeft. Uiteindelijk zal dit ervoor zorgen dat de renderer van de browser veel onnodig werk doet. Het is het beste om altijd het hertekenen tot een minimum te beperken. Als je om wat voor reden dan ook dragover-events moet gebruiken, overweeg dan om event listeners te beperken of te verwijderen.
Maak de plaatsing af
Om de daadwerkelijke plaatsing te regelen, voeg een event listener toe voor het drop-evenement. In een drop handler moet je het standaardplaatsingsgedrag van de browser blokkeren, wat meestal een soort vervelende omleiding is. e.stopPropagation() kan worden aangeroepen om te voorkomen dat het evenement de DOM activeert.
Zorg ervoor dat je de nieuwe handler registreert bij de andere handler:
Als je de code op dit moment uitvoert, wordt het project niet op een nieuwe locatie geplaatst. Om dit te bereiken moet je een DataTransfer-object gebruiken.
De dataTransfer-eigenschap is waar alle DnD-wonderen plaatsvinden. Het slaat de datafragmenten op die tijdens de drag-operatie worden verzonden. dataTransfer wordt ingesteld in het dragstart-event en wordt gelezen/verwerkt in het drop-event. Roep e.dataTransfer.setData(mimeType, dataPayload) aan om het MIME-type en de datapayload van het object in te stellen.
In het volgende voorbeeld laten we gebruikers de volgorde van de kolommen herschikken. Om dit te doen, moet je eerst de HTML van het bronelement aan het begin van de drag opslaan:
Behandel kolomplaatsing in het drop-event, stel de HTML van de bronkolom in op de HTML van de doelkolom waar deze is geplaatst, controleer eerst of de doelkolom die door de gebruiker wordt gesleept en neergelaten hetzelfde is als de bronkolom.
Meer weerstandseigenschappen
Het dataTransfer-object toont eigenschappen die worden gebruikt om visuele feedback aan de gebruiker te geven tijdens het sleepproces. Deze eigenschappen kunnen ook worden gebruikt om te bepalen hoe elk plaatsingsdoel reageert op specifieke datatypes.
- dataTransfer.effectAllowed beperkt het "type drag" dat een gebruiker op een element kan uitvoeren. Het wordt gebruikt in het drag-and-drop verwerkingsmodel om dropEffect te initialiseren tijdens dragenter- en dragover-gebeurtenissen. Deze eigenschap kan worden ingesteld op de volgende waarden: geen, kopiëren, kopiërenLink, kopiërenBewegen, link, linkBewegen, verplaatsen, all, en niet-geïntialiseerd.
- dataTransfer.dropEffect regelt de feedback die aan de gebruiker wordt gegeven tijdens dragenter- en dragover-gebeurtenissen. Wanneer de gebruiker over het doelelement beweegt, geeft de cursor van de browser het type actie aan dat uitgevoerd moet worden (bijvoorbeeld kopiëren, verplaatsen, enz.). Het effect kan een van de volgende waarden zijn: geen, kopiëren, linken, verplaatsen.
- e.dataTransfer.setDragImage(imgElement, x, y) geeft aan dat de standaard "ghost image" feedback van de browser niet wordt gebruikt, en dat er in plaats daarvan een optie is om het sleep-icoon in te stellen.
Upload bestanden door te slepen en te laten vallen
Het volgende eenvoudige voorbeeld gebruikt een kolom als drag-source en drag-doel. Dit is te zien in de gebruikersinterface wanneer de gebruiker wordt gevraagd de items te herschikken. In sommige gevallen kan het slepen van het doel en het slepen van de bron verschillen, bijvoorbeeld in een interface waar de gebruiker een afbeelding als hoofdafbeelding van het product moet selecteren door de geselecteerde afbeelding op het doel te slepen.
Slepen en neerzetten worden vaak gebruikt om gebruikers in staat te stellen items van het bureaublad naar de app te slepen. Het grootste verschil is de drop handler. Zonder dataTransfer.getData() te gebruiken om het bestand te benaderen, worden de gegevens van het bestand opgenomen in de dataTransfer.files-eigenschap:
Originele link:De hyperlink-login is zichtbaar.
|
Geplaatst op 26-4-2022 10:30:50
|
|
|
|
Geplaatst op 26-4-2022 21:27:25
|
