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, er det en afgørende færdighed at have i dit webudviklingsværktøj at forstå, hvordan du kan udnytte mulighederne i denne API.
Indholdsfortegnelse
Det grundlæggende i træk og slip i HTML
I et typisk træk-og-slip-system er der to typer elementer: den første type omfatter elementer, der kan trækkes, som brugere kan flytte med en mus, og den anden type omfatter elementer, der kan slippes, som typisk angiver, hvor brugerne kan placere et 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 trækbart af brugeren, skal det element have en trækbar HTML-attribut sat til sand, sådan her:
<div draggable="true">This element is draggable</div>
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’en, oprette et nyt billede til at repræsentere det brugerdefinerede feedbackbillede og tilføje en trækstart-trækhændelseslytter som denne:
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 har setDragImage-metoden 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 både dragenter- og dragover-begivenheder, sådan her:
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 hændelsestyper under DragEvent-grænsefladen.
- træk: 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æk over: Når brugeren trækker et element, der kan trækkes hen over et dropmål, udløses hændelsen.
- dragstart: Hændelsen udløses ved starten af en træk-operation.
- drop: Brugeren udløser denne hændelse, når de slipper et element på et drop-må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-hændelser.
DragEvent kan være praktisk, hvis du ønsker at sende en brugerdefineret træk-begivenhed programmatisk. For eksempel, hvis du vil have en div til at udløse tilpassede trækhændelser ved sideindlæsning, er det her, hvordan du gør det. Først skal du oprette en ny brugerdefineret DragEvent() som denne:
const customDragStartEvent = new DragEvent('dragstart', {
dataTransfer: new DataTransfer(),
})const customDragEndEvent = new DragEvent('dragend');
I kodeblokken ovenfor repræsenterer customDragStartEvent en forekomst af 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 dataTransfer-nøgle, der repræsenterer en instans af DataTransfer, som du vil lære mere om senere i denne vejledning. Tag derefter fat i det element, du vil udløse hændelsen 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 setData-metoden på dataTransfer-egenskaben på hændelsesobjektet. Nu kan du udløse de tilpassede hændelser som dette:
draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);
Overførsel af data med dataoverførsel
DataTransfer-objektet 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 metoden setData() fra dataTransfer-objektet. 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, pakker setData() teksten “Hej, verden!” med datatypen text/plain. Disse data er nu knyttet til trækhændelsen og kan tilgås af det drop-bare mål under drop-handlingen.
Hentning af data med getData()
I den modtagende ende, inden for et dropable elements hændelseslytter, kan du hente de overførte data ved hjælp af getData() metoden:
element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});
Kodeblokken ovenfor henter dataene med den samme datatype (tekst/almindelig), som blev indstillet ved hjælp af setData() metoden 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 emner, 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 kan træk og slip 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.