Brug af HTML5 Drag and Drop API

HTML5 Drag and Drop (DnD) API betyder, at vi kan gøre næsten ethvert element på vores side trækkeligt. I dette indlæg forklarer vi det grundlæggende i Drag og slip.

Oprettelse af trækbart indhold #

Det er værd at bemærke, at tekstvalg, billeder og links i de fleste browsere kan trækkes som standard. F.eks. hvis du trækker Google-logo på Google-søgning vil du se spøgelsesbilledet. Billedet kan derefter slettes i adresselinjen, et <input type="file" /> -element eller endda skrivebordet. For at gøre andre typer indhold trækkeligt du skal bruge HTML5 DnD APIerne.

For at få et objekt til at trækkes sæt draggable=true på det element. Næsten alt kan træk-aktiveres, billeder, filer , links, filer eller en hvilken som helst markering på din side.

I vores eksempel opretter vi en grænseflade til at omarrangere nogle kolonner, som er lagt med CSS Grid. Den grundlæggende markering for mine kolonner ser ud som dette, hvor hver kolonne har

attribut indstillet tiltrue.

Her er CSS for mine container- og bokselementer. Bemærk, at den eneste CSS relateret til DnD-funktionalitet er egenskaben cursor: move. Resten af koden styrer bare layoutet og stylingen af container- og bokselementerne.

På dette tidspunkt vil du find ud af, at du kan trække elementerne, men der vil ikke ske noget andet. For at tilføje DnD-funktionaliteten er vi nødt til at bruge JavaScript API.

Lytning til at trække begivenheder #

Der er et nummer af forskellige begivenheder, der skal knyttes til for at overvåge hele træk og slip-processen.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

For at håndtere DnD-flowet har du brug for en slags kildeelement (hvor træk stammer), dataen pa yload (hvad du prøver at droppe) og et mål (et område til at fange dråben). Kildeelementet kan være et billede, liste, link, filobjekt, HTML-blok osv. Målet er drop zone (eller sæt dropzoner), der accepterer de data, som brugeren prøver at slippe. Husk, at ikke alle elementer kan være mål, for eksempel kan et billede ikke være et mål.

Start og slutning en træk-og-slip-sekvens #

Når du har defineret draggable="true" -attributter på dit indhold, skal du vedhæfte en dragstart begivenhedshåndterer for at starte DnD-sekvensen for hver kolonne.

Denne kode indstiller kolonnens opacitet til 40%, når brugeren begynder at trække den, og returnerer den derefter til 100%, når trækbegivenheden slutter.

Resultatet kan ses i Glitch-demo nedenfor. Træk et element, og det bliver uigennemsigtigt. Da dragstart begivenhedens mål er kildeelementet, indstilles this.style.opacity til 40% giver brugeren visuel feedback om, at elementet er det aktuelle valg, der flyttes. Når du har droppet elementet, selvom drop-funktionaliteten ikke er på plads, vender kildeelementet tilbage til 100% opacitet.

Tilføj yderligere visuelle signaler med dragenter, dragover og dragleave #

For at hjælpe brugeren med at forstå, hvordan man interagerer med din grænseflade, skal du bruge dragenter, dragover og dragleave begivenhedshåndterere. I dette eksempel er kolonnerne dropmål ud over at kunne trækkes. Hjælp brugeren for at forstå dette ved at gøre grænsen stiplet, da de holder et trukket element over en kolonne. For eksempel kan du i din CSS oprette en klasse over til at repræsentere elementer, der er dropmål:

Derefter i din J avaScript opsæt begivenhedshåndtererne, tilføj over klassen, når kolonnen trækkes over, og fjern den, når vi forlader. I dragend handler vi også sørge for at fjerne klasser i slutningen af træk.

Der er et par punkter, der er værd at dække i denne kode :

• I tilfælde af at trække noget som et link skal du forhindre browserens standardadfærd, som er at navigere til dette link. For at gøre dette skal du ringe til e.preventDefault() i dragover begivenheden. En anden god praksis er at returnere false i den samme handler.
• dragenter begivenhedshåndterer bruges til at skifte over klassen i stedet for dragover .Hvis du bruger dragover, vil CSS-klassen blive skiftet mange gange, da begivenheden dragover fortsatte med at skyde på en kolonnesving. I sidste ende, det ville forårsage browserens renderer til at udføre en stor mængde unødvendigt arbejde. At holde træk til et minimum er altid en god ide.Hvis du har brug for dragover begivenheden til noget, skal du overveje at nedsætte eller afvise din begivenhedslytter.

Fuldfør dråben #

For at behandle det aktuelle fald skal du tilføje en begivenhedslytter til drop begivenheden. I drop -håndteringen skal du forhindre browserens standardadfærd for dråber, som typisk er en slags irriterende omdirigering. Du kan forhindre begivenheden i at sprænge DOM op ved at ringe til e.stopPropagation().

Hvis du kører koden på dette tidspunkt, falder varen ikke til den nye placering. For at opnå dette skal du bruge DataTransfer objekt.

Egenskaben dataTransfer er, hvor al DnD-magien sker. Den indeholder det stykke data, der sendes i en trækhandling. dataTransfer er indstillet i dragstart begivenheden og læses / håndteres i drop-begivenheden. Ved at ringe til e.dataTransfer.setData(mimeType, dataPayload) kan du indstille objektet “s MIME-type og data-nyttelast.

I dette eksempel vil vi tillade brugere at omarrangere rækkefølgen af kolonnerne. For at gøre det skal du først gemme kildeelementets HTML, når du trækker starter:

I drop begivenheden, du behandler kolonnefaldet, indstil kildekolonnens HTML til HTMLen for den målkolonne, du faldt på, og kontroller først, at brugeren ikke falder tilbage til den samme kolonne, de trak fra.

Du kan se resultatet i den følgende demo. træk og slip A-kolonnen oven på B-kolonnen og læg mærke til, hvordan de skifter plads:

Mere trækegenskaber #

dataTransfer -objektet udsætter egenskaber for at give brugeren visuel feedback under trækprocessen. Disse egenskaber kan også bruges til at kontrollere, hvordan hvert dropmål reagerer på en bestemt datatype.

• dataTransfer.effectAllowed ts hvilken “træk-type” brugeren kan udføre på elementet. Det bruges i træk-og-slip-behandlingsmodellen til at initialisere dropEffect under dragenter og dragover begivenheder. Egenskaben kan indstilles til følgende værdier: none, copy, copyLink, copyMove, link, linkMove, move, all og uninitialized.
• dataTransfer.dropEffect styrer den feedback, som brugeren får under dragenter og dragover hændelser. Når brugeren svæver over et målelement, vil browserens markør angive, hvilken type operation der skal finde sted (f.eks. en kopi, et træk osv.). Effekten kan få en af følgende værdier: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) betyder det i stedet for at bruge browseren ” s standard “ghost image” -feedback kan du eventuelt indstille et trækikon.

Upload af fil med træk og slip #

Dette enkle eksempel bruger en kolonne som begge træk kilde og træk mål. Dette kan ses i et brugergrænseflade, hvor brugeren bliver bedt om at omarrangere elementerne. I nogle situationer kan trækmål og kilde være forskellige, f.eks. en grænseflade, hvor brugeren skal vælge et billede, der skal være hovedbillede for et produkt ved at trække det valgte billede til et mål.

Træk og slip bruges ofte til at give brugerne mulighed for at trække elementer fra deres skrivebord til et program. Den største forskel er i din drop handler. I stedet for at bruge dataTransfer.getData() til at få adgang til filerne, er deres data wi Det vil være indeholdt i egenskaben dataTransfer.files:

Du kan finde flere oplysninger om dette i brugerdefineret træk og slip.