Sådan bruger du HTML Drag and Drop API

Træk og slip er en væsentlig funktion, der forbedrer brugerinteraktionen og letter en problemfri brugeroplevelse. Uanset om du ønsker at bygge en filuploader, en sorterbar liste eller et interaktivt spil, at forstå, hvordan man udnytter mulighederne i denne API, er en afgørende færdighed at have på dit web udviklingsværktøj.

Grundlæggende om træk og slip i HTML

I et typisk træk-og-slip-system er der to typer elementer: den første type omfatter trækbare elementer, som brugere kan bevæge sig med en mus, og den anden type indeholder elementer, der kan droppes, der typisk angiver, hvor brugere kan placere en element.

For at implementere træk og slip, skal du fortælle browseren, hvilke elementer du ønsker skal kunne trækkes. For at gøre et element kan trækkes af brugeren, skal det element have en trækbarHTML attribut indstillet til rigtigt, sådan her:

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

Når brugeren begynder at affyre en trækhændelse, leverer browseren et standard "spøgelsesbillede", der typisk giver feedback vedrørende et element, der trækkes.

Du kan tilpasse dette billede ved at levere dit eget billede i stedet for. For at gøre dette skal du vælge det trækbare element fra DOM, oprette et nyt billede til at repræsentere det tilpassede feedbackbillede og tilføje et trækstart træk begivenhedslytter som dette:

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

I kodeblokken ovenfor er setDragImage metoden har tre parametre. Den første parameter refererer til billedet. De andre parametre repræsenterer henholdsvis de vandrette og lodrette forskydninger af billedet. Når du kører koden i browseren og begynder at trække et element, vil du bemærke, at det brugerdefinerede trækbillede er blevet erstattet med det brugerdefinerede billede, der er indstillet tidligere.

Hvis du vil tillade et drop, skal du forhindre standardadfærden ved at annullere begge dragenter og trækker begivenheder som dette:

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

Forstå DragEvent-grænsefladen

JavaScript har en DragEvent grænseflade, der repræsenterer en træk-og-slip-interaktion fra brugeren. Nedenfor er en liste over mulige begivenhedstyper under DragEvent interface.

• trække: Brugeren udløser denne hændelse, mens han trækker et element.
• dragend: Denne hændelse udløses, når trækhandlingen afsluttes, eller når brugeren afbryder den. En typisk trækoperation kan afsluttes ved at slippe museknappen eller trykke på escape-tasten.
• dragenter: Et trukket element udløser denne hændelse, når det indtaster et gyldigt dropmål.
• dragleave: Når det slæbte element forlader et dropmål, udløses denne begivenhed.
• trækker: Når brugeren trækker et element, der kan trækkes hen over et dropmål, udløses hændelsen.
• trækstart: Hændelsen udløses ved starten af ​​en trækoperation.
• dråbe: Brugeren udløser denne hændelse, når de slipper et element på et dropmål.

Når du trækker en fil ind i browseren fra et miljø uden for browseren (f.eks. operativsystemets filhåndtering), udløser browseren ikke trækstart eller dragend begivenheder.

DragEvent kan være praktisk, hvis du vil sende en brugerdefineret trækhændelse programmatisk. Hvis du f.eks. ønsker at a div for at udløse tilpassede trækhændelser ved sideindlæsning, her er hvordan du gør det. Først skal du oprette en ny brugerdefineret DragEvent() sådan her:

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

I kodeblokken ovenfor, customDragStartEvent repræsenterer et eksempel på DragEvent(). I customDragStartEvent, er der to konstruktørargumenter. Den første repræsenterer trækhændelsestypen, som kan være en af ​​de syv hændelsestyper nævnt tidligere.

Det andet argument er et objekt med en dataoverførsel nøgle, der repræsenterer en instans af Dataoverførsel, som du vil lære mere om senere i denne vejledning. Tag derefter fat i det element, du vil udløse begivenheden fra, fra Document Object Model (DOM).

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

Tilføj derefter begivenhedslytterne som dette:

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

I den første begivenhedslytter ovenfor logger tilbagekaldsfunktionen teksten "Træk startet!" og påberåber sig sætData metode på dataoverførsel ejendom på begivenhed objekt. Nu kan du udløse de tilpassede hændelser som dette:

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

Overførsel af data med dataoverførsel

Det dataoverførsel objekt fungerer som en bro mellem kildeelementet (det trækbare element) og målelementet (det slipbare område) under en træk-og-slip-handling. Den fungerer som en midlertidig lagerbeholder for data, som du vil dele mellem disse elementer.

Disse data kan antage forskellige former, såsom tekst, URL'er eller brugerdefinerede datatyper, hvilket gør det til et alsidigt værktøj til implementering af en lang række træk-og-slip-funktioner.

Brug af setData() til at pakke data

For at overføre data fra et element, der kan trækkes, til et element, der kan slippes, skal du bruge setData() metode leveret af dataoverførsel objekt. Denne metode giver dig mulighed for at pakke de data, du vil overføre, og angive datatypen. Her er et grundlæggende eksempel:

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

Når en bruger begynder at trække det angivne element, setData() pakker teksten "Hej, verden!" med datatypen tekst/almindelig. Disse data er nu knyttet til trækhændelsen og kan tilgås af det drop-bare mål under drop-operationen.

Hentning af data med getData()

I den modtagende ende, i et dropable elements begivenhedslytter, kan du hente de overførte data ved hjælp af getData() metode:

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

Kodeblokken ovenfor henter data med samme datatype (tekst/almindelig), der blev indstillet ved hjælp af setData() metode tidligere. Dette giver dig mulighed for at få adgang til og manipulere de overførte data efter behov inden for det dropable elements kontekst.

Use Cases til træk og slip-grænseflader

Integrering af træk-og-slip-funktionalitet i dine webapplikationer kan være en kraftig forbedring, men det er vigtigt at forstå, hvornår og hvorfor du bør implementere det.

• Filuploadere: At tillade brugere at trække filer direkte fra deres skrivebord eller filhåndtering til et udpeget dropområde forenkler uploadprocessen.
• Sorterbare lister: Hvis din applikation involverer lister over elementer, såsom opgavelister, afspilningslister eller billedgallerier, vil brugerne måske sætte pris på muligheden for at omarrangere elementer via træk og slip.
• Interaktive Dashboards: Til datavisualisering og rapporteringsværktøjer, træk og slip kan være en effektiv måde for brugere at tilpasse deres dashboards ved at omarrangere widgets og diagrammer.

Hold tilgængelighed i tankerne

Selvom træk og slip kan være visuelt tiltalende og forbedre brugeroplevelsen, er det afgørende at sikre, at din implementering forbliver tilgængelig for alle brugere, inklusive dem med handicap. Angiv alternative metoder til interaktion, såsom tastaturkontroller, for at gøre din applikation inkluderende.