De HTML-sleep-API gebruiken

Slepen en neerzetten is een essentiële functie die de gebruikersinteractie verbetert en een naadloze gebruikerservaring mogelijk maakt. Of je nu een bestandsuploader, een sorteerbare lijst of een interactief spel wilt bouwen, begrijpen hoe je de mogelijkheden van deze API kunt benutten is een cruciale vaardigheid in je toolkit voor webontwikkeling.

De basisprincipes van slepen en neerzetten in HTML

De eerste categorie omvat elementen die kunnen worden gemanipuleerd met een aanwijsapparaat, zoals een muis, en kunnen worden verplaatst naar alternatieve gebieden; terwijl de tweede categorie bestaat uit elementen die over het algemeen aangewezen bestemmingen voor deze elementen afbakenen, zodat gebruikers ze op die locaties kunnen neerzetten.

Om slepen en neerzetten in een webtoepassing mogelijk te maken, moet worden gespecificeerd welke elementen bedoeld zijn voor manipulatie door middel van het “draggable”-attribuut in de bijbehorende HTML-opmaak. Door de waarde van dit attribuut in te stellen op “true”, zoals in het gegeven voorbeeld, kan een bepaald element vervolgens door de gebruiker binnen de interface worden verplaatst of verplaatst via drag-and-drop acties.

 <div draggable="true">This element is draggable</div>

Bij het initiëren van een sleepbewerking door middel van een door de gebruiker gegenereerde invoergebeurtenis die bekend staat als een “sleepgebeurtenis”, levert de webbrowser gewoonlijk een plaatshouder die een “spookbeeld” wordt genoemd. Deze visuele aanwijzing dient om feedback te geven over de status of voortgang van een element dat wordt gemanipuleerd tijdens het slepen.

Je hebt de mogelijkheid om deze afbeelding te personaliseren door er je eigen visuele inhoud voor in de plaats te zetten. Dit kan worden bereikt door de beweegbare component te kiezen uit het Document Object Model (DOM), een nieuwe afbeelding te genereren om te dienen als de op maat gemaakte feedbackafbeelding en een

 let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';

document.querySelector('div').addEventListener('dragstart', (event)=>{
    event.dataTransfer.setDragImage(img, 10, 10);
})

Het bovenstaande codeblok demonstreert het gebruik van de methode setDragImage , die drie invoerparameters bevat. De eerste parameter verwijst naar de gewenste afbeelding, terwijl de volgende twee parameters de respectieve horizontale en verticale verplaatsingen van de genoemde visuele weergave aanduiden. Na uitvoering in een webbrowser en het initiëren van het slepen van een element, wordt het duidelijk dat de standaardafbeelding voor slepen is vervangen door de eerder geconfigureerde aangepaste afbeelding.

Om een release mogelijk te maken, is het nodig om de standaardbewerking tegen te gaan door zowel dedragenteralsdragover-incidenten te annuleren, zoals hieronder wordt gedemonstreerd:

 const dropElement = document.querySelector("drop-target");

dropElement.addEventListener("dragenter", (ev) => {
  ev.preventDefault();
});

dropElement.addEventListener("dragover", (ev) => {
  ev.preventDefault();
});

De DragEvent-interface begrijpen

JavaScript biedt een DragEvent-interface, die de sleep-en neerzetinteractie van een gebruiker inkapselt. Hieronder volgen enkele gebeurtenistypen die met deze interface zijn geassocieerd:

Tijdens het slepen van een bepaald element activeert de gebruiker de gebeurtenis “slepen”.

De “dragend” gebeurtenis wordt geactiveerd na het voltooien van een sleepbewerking, ofwel door het loslaten van de muisknop of door het indrukken van de escape-toets.

De dragenter gebeurtenis wordt geactiveerd door een gesleept element wanneer het over een geldig neerzettingsdoel beweegt, wat kan duiden op een actie of interactie waarbij gegevens van de ene naar de andere locatie in een gebruikersinterface worden verplaatst.

De “dragleave”-gebeurtenis wordt geactiveerd wanneer een gesleept element zich niet langer boven of op een bepaald druppeldoel bevindt. Deze gebeurtenis dient als tegenhanger van de gebeurtenis “dragenter”, die optreedt wanneer het gesleepte element voor het eerst een potentieel valdoel binnengaat.

Tijdens het slepen van een manipuleerbaar element over een receptief gebied wordt een gebeurtenis geactiveerd door de actie van de gebruiker.

Bij initiatie wordt de “dragstart”-gebeurtenis geactiveerd om een sleepactie te starten.

Na ontvangst van de invoer van de gebruiker starten we de “drop”-actie in ons systeem. Deze gebeurtenis wordt geactiveerd wanneer de gebruiker een item loslaat boven op een daarvoor bestemd doelgebied.

Wanneer bestanden worden overgedragen naar een webbrowser via externe middelen zoals een bestandsbeheertool van een besturingssysteem, start de browser niet de gebruikelijke “dragstart”- of “dragend”-gebeurtenissen als reactie.

Het gebruik van DragEvent kan voordelig zijn als je een aangepaste sleepgebeurtenis algoritmisch wilt verzenden. Ter illustratie, stel dat men aangepaste sleepgebeurtenissen voor een bepaald div element wil starten bij het laden van de pagina. Het proces zou het aanmaken van een nieuwe instantie van DragEvent met zich meebrengen, zoals hieronder weergegeven:

 const customDragStartEvent = new DragEvent('dragstart', {
    dataTransfer: new DataTransfer(),
})

const customDragEndEvent = new DragEvent('dragend');

In het bovenstaande codefragment is customDragStartEvent een instantie van de klasse DragEvent() die twee constructorparameters bevat. De eerste parameter geeft het specifieke type sleepgebeurtenis aan en omvat een van de eerder genoemde zeven mogelijke gebeurtenistypen.

De tweede parameter vertegenwoordigt een object dat een eigenschap met de naam “dataTransfer” bevat, die overeenkomt met een instantie van de interface DataTransfer. Deze interface zal verder in detail worden besproken in deze handleiding. Om toegang te krijgen tot het gewenste element in het Document Object Model (DOM), volg je deze stappen…

 const draggableElement = document.querySelector("#draggable");

Voeg vervolgens de event listeners als volgt toe:

   draggableElement.addEventListener('dragstart', (event) => {
    console.log('Drag started!');
    event.dataTransfer.setData('text/plain', 'Hello, world!');
   });

  draggableElement.addEventListener('dragend', () => {
    console.log('Drag ended!');
  });

In de eerste event listener hebben we een callback-functie gebruikt die het bericht “Drag started!” logt en tegelijkertijd de methode setData oproept op de eigenschap dataTransfer van het object event . Hierdoor kunnen we onze aangepaste gebeurtenissen op een naadloze manier starten.

 draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Gegevens overdragen met dataTransfer

Het object gegevensoverdracht fungeert als een tussenpersoon tussen het element dat het slepen veroorzaakt, de slepende entiteit, en de beoogde ontvanger, of het gebied dat kan worden neergezet. Tijdens een slepen-en-neerzetten-proces werkt het als een tijdelijke opslagplaats ontworpen om informatie op te slaan die bedoeld is om te worden gedeeld tussen deze twee entiteiten.

De veelzijdigheid van deze gegevens blijkt duidelijk uit de mogelijkheid om meerdere formaten aan te nemen, waaronder tekst, URLS en aangepaste gegevenstypen, waardoor een uitgebreide reeks functies voor slepen en neerzetten mogelijk wordt.

SetData() gebruiken om gegevens te verpakken

Om informatie over te brengen van een manipuleerbaar onderdeel naar een ontvanger, kun je gebruikmaken van de mogelijkheden van de setData() methode van het dataTransfer object. Met deze aanpak kun je de gegevens die je wilt verzenden inkapselen en tegelijkertijd het gegevenstype specificeren. Hieronder staat een fundamentele illustratie:

 element.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Bij het initiëren van het verplaatsen van een item waarvan is aangegeven dat het specifieke attributen heeft, verzenden we een bericht met de informatie “Hallo, wereld!” in een formaat dat is aangeduid als tekst/plain. Deze inhoud wordt gekoppeld aan de handeling van het slepen en kan vervolgens worden opgehaald door de beoogde ontvanger van het gedropte object tijdens het proces van het loslaten ervan.

Gegevens ophalen met getData()

Binnen het bereik van een element waarop kan worden gereageerd en dat zich voor deze mogelijkheid heeft geregistreerd via de implementatie van een event listener, kan men de gegevens ophalen die zijn verzonden door de methode getData() te gebruiken:

 element.addEventListener('drop', (event) => {
  const transferredData = event.dataTransfer.getData('text/plain');
  console.log(`Received data: ${transferredData}`);
});

Het bovengenoemde codesegment haalt informatie op met dezelfde inhoudsclassificatie (text/plain) die was vastgesteld door de voorafgaande setData() procedure. Dit laat bijgevolg toe om de getransporteerde gegevens te verkrijgen en te wijzigen in overeenstemming met de wensen van de omgeving van de droppable component.

Use Cases for Drag and Drop Interfaces

Het integreren van drag-and-drop mogelijkheden in webapplicaties heeft een groot potentieel als upgrade, maar het is cruciaal om de specifieke situaties en redenen voor het implementeren van deze functie te begrijpen.

Door gebruikers in staat te stellen bestanden moeiteloos over te brengen vanuit de bestandsverkenner of het bureaublad van hun computer door middel van een aangewezen dropzone, wordt het proces van het indienen van media-inhoud gestroomlijnd en gebruiksvriendelijker gemaakt.

In situaties waarin de interactie van een gebruiker met een toepassing bestaat uit lijsten met verschillende elementen, waaronder taken, mediabestanden of andere relevante items, kan het bieden van de middelen om deze items te herschikken door middel van drag-and-drop functionaliteit hun algehele ervaring verbeteren door het aanbieden van een meer intuïtieve en efficiënte methode voor het organiseren van inhoud.

Om een interactief dashboard met datavisualisatie en rapportagemogelijkheden te maken, kunnen gebruikers met de drag-and-drop-functionaliteit eenvoudig verschillende widgets en grafieken herschikken volgens hun voorkeuren. Met deze functie kunnen gebruikers hun dashboardervaring in realtime aanpassen aan hun specifieke behoeften, wat de algehele bruikbaarheid en flexibiliteit van het platform verbetert.

Toegankelijkheid in gedachten houden

Hoewel de visuele aantrekkingskracht van drag-and-drop functionaliteit positief kan bijdragen aan de algehele ervaring van een gebruiker, is het noodzakelijk om de toegankelijkheid ervan voor verschillende vaardigheden te garanderen. Om inclusiviteit te bereiken, kun je overwegen om aanvullende manieren van interactie in te bouwen, zoals toetsenbordgebaseerde besturingsopties, die tegemoet komen aan mensen met een beperking en de bruikbaarheid vergroten.