Hoe u de HTML Drag and Drop-API gebruikt

Slepen en neerzetten is een essentiële functie die de gebruikersinteractie verbetert en een naadloze gebruikerservaring mogelijk maakt. Of u nu een bestandsuploader, een sorteerbare lijst of een interactief spel wilt bouwen, Begrijpen hoe u de mogelijkheden van deze API kunt benutten, is een cruciale vaardigheid die u in uw web moet hebben ontwikkelingstoolkit.

De basisprincipes van slepen en neerzetten in HTML

In een typisch drag-and-drop-systeem zijn er twee soorten elementen: het eerste type bestaat uit versleepbare elementen die door gebruikers kunnen worden gebruikt kan met een muis bewegen, en het tweede type bevat verwijderbare elementen die doorgaans specificeren waar gebruikers een element.

Om slepen en neerzetten te implementeren, moet u de browser vertellen welke elementen u versleepbaar wilt maken. Om een ​​element door de gebruiker versleepbaar te maken, moet dat element een sleepbaarHTML-kenmerk ingesteld op WAAR, soortgelijk:

<divdraggable="true">This element is draggablediv>

Wanneer de gebruiker een drag-gebeurtenis begint af te vuren, levert de browser een standaard "spook"-afbeelding die doorgaans feedback geeft over een element dat wordt gesleept.

U kunt deze afbeelding aanpassen door in plaats daarvan uw eigen afbeelding aan te leveren. Om dit te doen selecteert u het versleepbare element uit de DOM, maakt u een nieuwe afbeelding om de aangepaste feedbackafbeelding weer te geven en voegt u een sleepstart sleep de gebeurtenislistener als volgt:

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);
})

In het bovenstaande codeblok wordt de setDragImage methode heeft drie parameters. De eerste parameter verwijst naar de afbeelding. De andere parameters vertegenwoordigen respectievelijk de horizontale en verticale verschuivingen van het beeld. Wanneer u de code in de browser uitvoert en een element begint te slepen, zult u merken dat de aangepaste sleepafbeelding is vervangen door de eerder ingestelde aangepaste afbeelding.

Als u een verwijdering wilt toestaan, moet u het standaardgedrag voorkomen door beide te annuleren drager En overdragen evenementen, zoals deze:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

De DragEvent-interface begrijpen

JavaScript-functies a DragEvent interface die een drag-and-drop-interactie van de gebruiker vertegenwoordigt. Hieronder vindt u een lijst met mogelijke gebeurtenistypen onder de DragEvent koppel.

• sleuren: De gebruiker activeert deze gebeurtenis terwijl hij een element sleept.
• gedragen: deze gebeurtenis wordt geactiveerd wanneer de sleepbewerking eindigt of wanneer de gebruiker deze onderbreekt. Een typische sleepbewerking kan worden beëindigd door de muisknop los te laten of op de Escape-toets te drukken.
• drager: Een gesleept element activeert deze gebeurtenis wanneer het een geldig neerzetdoel binnengaat.
• sleepblad: Wanneer het gesleepte element een neerzetdoel verlaat, wordt deze gebeurtenis geactiveerd.
• overdragen: Wanneer de gebruiker een versleepbaar element over een neerzetdoel sleept, wordt de gebeurtenis geactiveerd.
• sleepstart: De gebeurtenis wordt geactiveerd aan het begin van een sleepoperatie.
• druppel: De gebruiker activeert deze gebeurtenis wanneer hij een element op een neerzetdoel laat vallen.

Wanneer u een bestand naar de browser sleept vanuit een omgeving buiten de browser (bijvoorbeeld de bestandsbeheerder van het besturingssysteem), activeert de browser niet de sleepstart of gedragen evenementen.

DragEvent kan van pas komen als u programmatisch een aangepaste drag-gebeurtenis wilt verzenden. Als u bijvoorbeeld een div Om aangepaste sleepgebeurtenissen af ​​te vuren bij het laden van de pagina, kunt u dit als volgt doen. Maak eerst een nieuwe gewoonte aan DragEvent() soortgelijk:

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

In het bovenstaande codeblok customDragStartEvent vertegenwoordigt een voorbeeld van DragEvent(). In customDragStartEvent, zijn er twee constructorargumenten. De eerste vertegenwoordigt het drag-gebeurtenistype, dat een van de zeven eerder genoemde gebeurtenistypen kan zijn.

Het tweede argument is een object met a data overdracht sleutel die een exemplaar vertegenwoordigt van Data overdracht, waarover u verderop in deze handleiding meer zult lezen. Pak vervolgens het element waarvan u de gebeurtenis wilt activeren, uit de Documentobjectmodel (DOM).

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

Voeg vervolgens de gebeurtenislisteners 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 gebeurtenislistener hierboven registreert de callback-functie de tekst: "Slepen gestart!" en beroept zich op de setGegevens methode op de data overdracht eigendom op de evenement voorwerp. Nu kunt u de aangepaste gebeurtenissen als volgt activeren:

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

Gegevens overbrengen met dataTransfer

De data overdracht object dient als brug tussen het bronelement (het versleepbare item) en het doelelement (het neerzetbare gebied) tijdens een slepen-en-neerzetten-operatie. Het fungeert als tijdelijke opslagcontainer voor gegevens die u tussen deze elementen wilt delen.

Deze gegevens kunnen verschillende vormen aannemen, zoals tekst, URL's of aangepaste gegevenstypen, waardoor het een veelzijdig hulpmiddel is voor het implementeren van een breed scala aan functionaliteit voor slepen en neerzetten.

SetData() gebruiken om gegevens te verpakken

Om gegevens over te dragen van een versleepbaar element naar een neerzetbaar element, gebruikt u de setData() methode aangeboden door de data overdracht voorwerp. Met deze methode kunt u de gegevens die u wilt overbrengen, verpakken en het gegevenstype opgeven. Hier is een eenvoudig voorbeeld:

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

Wanneer een gebruiker het opgegeven element begint te slepen, setData() verpakt de tekst "Hallo wereld!" met het gegevenstype tekst/gewoon. Deze gegevens zijn nu gekoppeld aan de sleepgebeurtenis en zijn toegankelijk voor het neerzetbare doel tijdens de neerzetoperatie.

Gegevens ophalen met getData()

Aan de ontvangende kant kunt u, binnen de gebeurtenislistener van een droppable element, de overgedragen gegevens ophalen met behulp van de gegevens verkrijgen() methode:

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

Het bovenstaande codeblok haalt de gegevens op met hetzelfde gegevenstype (tekst/gewoon) die is ingesteld met behulp van de setData() methode eerder. Hierdoor kunt u de overgedragen gegevens indien nodig openen en manipuleren binnen de context van het droppable element.

Gebruiksscenario's voor drag-and-drop-interfaces

Het integreren van drag-and-drop-functionaliteit in uw webapplicaties kan een krachtige verbetering zijn, maar het is essentieel om te begrijpen wanneer en waarom u dit zou moeten implementeren.

• Bestandsuploaders: Door gebruikers toe te staan ​​bestanden rechtstreeks vanaf hun bureaublad of bestandsbeheerder naar een aangewezen neerzetgebied te slepen, wordt het uploadproces vereenvoudigd.
• Sorteerbare lijsten: als uw toepassing lijsten met items bevat, zoals takenlijsten, afspeellijsten of afbeeldingsgalerijen, kunnen gebruikers de mogelijkheid waarderen om items opnieuw te ordenen via slepen en neerzetten.
• Interactieve dashboards: Voor tools voor datavisualisatie en rapportageslepen en neerzetten kan voor gebruikers een krachtige manier zijn om hun dashboards aan te passen door widgets en grafieken opnieuw te rangschikken.

Toegankelijkheid in gedachten houden

Hoewel slepen en neerzetten visueel aantrekkelijk kan zijn en de gebruikerservaring kan verbeteren, is het van cruciaal belang ervoor te zorgen dat uw implementatie toegankelijk blijft voor alle gebruikers, inclusief gebruikers met een beperking. Bied alternatieve methoden voor interactie, zoals toetsenbordbediening, om uw applicatie inclusief te maken.