JavaScript-træk og slip

Oversigt: i denne vejledning lærer du om JavaScript-træk og slip-API.

Introduktion til JavaScript Drag and Drop API

HTML5 introducerede formelt træk-og-slip-specifikationen. De fleste moderne webbrowsere har implementeret native træk-og-slip baseret på HTML5-specifikationen.

Som standard kan kun billede og tekst trækkes. For at trække et billede skal du blot holde museknappen nede og derefter flytte det. For at trække teksten skal du fremhæve noget tekst og trække det på samme måde som du ville trække et billede.

HTML5-specifikationen angiver, at næsten alle elementer kan trækkes. For at gøre et element trækkeligt skal du tilføje draggable egenskaben med værdien true til dets HTML-tag. For eksempel:

Code language: HTML, XML (xml)

Begivenheder på trækbare elementer

Når du trækker et element, udløses disse begivenheder i følgende rækkefølge:

• dragstart
• drag
• dragend

Når du holder en museknap og begynder at bevæge musen, hændes dragstart på det trækbare element at du trækker. Markøren skifter til et no-drop-symbol (en cirkel med en linje gennem den) for at indikere, at du ikke kan slippe elementet på sig selv.

Efter dragstart begivenhed fyres, drag begivenheden udløses gentagne gange, så længe du trækker elementet.

Og begivenheden dragend når du holder op med at trække elementet.

Målet for alle begivenheder (e.target) er det element, der trækkes.

Som standard , browseren ændrer ikke udseendet på det trækkede element. Derfor kan du tilpasse dets udseende ud fra dine præferencer.

Begivenheder på drop-mål

Når du trækker et element over et gyldigt drop-mål, affyres disse begivenheder i følgende rækkefølge:

• dragenter
• dragover
• dragleave eller drop

dragenter begivenheden udløses så snart når du trækker elementet over et drop target.

Efter dragenter begivenheden udløses, begivenheden dragover affyres gentagne gange så længe du trækker elementet inden for drop target-grænsen.

Når du trækker elementet uden for drop target-grænsen, vises dragover begivenhed stopper med at skyde, og dragleave begivenheden udløses.

Hvis du taber elementet på målet, er drop begivenheden udløses i stedet for dragleave begivenheden.

Målet ( ) af dragenter, dragover, dragleave, og drop begivenheder er drop target-elementer.

Gyldigt drop target

Næsten alle elementer understøtter drop target events (dragenter, dragover, dragleave og drop). De tillader dog ikke at droppe som standard.

Hvis du slipper et element over et faldmål, der ikke tillader at falde, vandt begivenheden drop t fire.

For at gøre et element til et gyldigt drop target kan du tilsidesætte standardadfærden for både dragenter og dragover begivenheder ved at kalde event.preventDefault() metoden i deres tilsvarende begivenhedshåndterere. (Se eksemplet for mere information)

Overfør data ved hjælp af dataTransfer-objekt

For at overføre data i en træk-og-slip-handling bruger du dataTransfer objekt.

dataTransfer objektet er en egenskab for begivenheden. Det giver dig mulighed for at overføre data fra det trakne element til drop target.

dataTransfer -objektet har to metoder: setData() og getData().

setData() giver dig mulighed for at indstille trækoperationens data til det angivne format og data :

Code language: CSS (css)

Formatet kan være text/plain eller text/uri-list. Og dataene kan være en streng, der repræsenterer de data, der skal føjes til trækobjektet.

getData() -metoden henter trækdata, der er gemt af setData() metode.

getData() accepterer et argument:

Formatet kan være text/plain eller text/uri-list. getData() returnerer en streng gemt ved setData() -metoden eller en tom streng, hvis trækoperationen ikke inkluderer data.

Eksempel på træk og slip-JavaScript

Vi udvikler følgende enkle træk-og-slip-applikation til at demonstrere JavaScript-træk og slip-API:

Opret projektstruktur

Opret først en ny mappe kaldet drag-n-drop-basics. Inde i denne mappe skal du oprette to undermapper kaldet css og js.

For det andet skal du oprette en ny fil kaldet app.js i js -mappen, style.css i css mappe og index.html i drag-n-drop-basics mappen.

For det tredje skal du placere linket til style.css og script-tag, der linker til app.js i index.html -filen sådan:

Byg index.html-filen

Placer følgende kode i index.html -filen:

I denne index.html-fil, vi brugte elementet .container til at justere overskriften og drop-targets -elementet.

Inde i drop-target-elementet, vi placerede tre div -elementer med samme klasse box. Og vi placerer et andet div-element med klassen item i det første felt.

Hvis du åbner index.html og prøv at trække det gule felt, du vil se markøren, der indikerer, at du ikke kan trække:

For at gøre elementet trækkeligt tilføjes draggable egenskaben med værdien true til sit HTML-tag som følger:

Code language: JavaScript (javascript)

Hvis du nu gemmer index.html, skal du åbne den i browseren igen ser du, at du kan trække elementet på denne måde:

Håndter begivenheder på det trækbare element

style.css -filen har .hide klasse, der skjuler et element:

Code language: CSS (css)

I filen app.js tilføjer du følgende kode:

Hvordan jeg t fungerer:

• Vælg først det trækbare element ved hjælp af querySelector().
• For det andet vedhæft en dragstart begivenhedshåndterer til elementet, der kan trækkes.
• For det tredje skal du definere dragStart() -funktionen for at håndtere dragstart begivenhed.

Hvis du åbner filen index.html og begynder at trække elementet, der kan trækkes, vises meddelelsen drag starts... konsollen.

I dragStart begivenhedshåndteringen skal du gemme id for det trækbare element. Og du skal skjule det:

Hvis du trækker elementet, vil du se, at det forsvinder, når du begynder at trække.

For at løse dette skal du bruge setTimeout() -funktion:

Nu kan du trække det trækbare element ud af dets oprindelige position:

Håndter begivenheder på slipmål

Style.css-filen har også en CSS-klasse kaldet .drag-over der omdanner drop-targetens kantstil til stiplet og rødt:

Code language: CSS (css)

I app.js har du brug for for at vælge drop-målelementerne og håndtere dragenter, dragover, dragleave og drop begivenheder for disse elementer:

Drop-målets kantstil skal ændres, når dragenter og dragover begivenhed opstår. Det skal gendanne stilen, når begivenheden dragleave og drop opstår.

For at gøre det skal du tilføje og fjerne drag-over klassen til drop målet på denne måde:

Hvis du nu trækker det trækbare element til en anden dråbe mål, vil du se, at grænsen til faldmålet ændres som vist på følgende billede:

For at gøre drop-målet gyldigt skal du ringe til event.preventDefault() i dragenter og dragover begivenhedshåndterere som denne:

Hvis du ikke gør dette, bliver begivenheden drop aldrig tænk, fordi div -elementet som standard ikke er et gyldigt dropmål.

Hvis du trækker det trækbare element til et drop target, ser du, at markøren ændringer, der indikerer, at du kan slippe elementet:

Hvis du nu slipper elementet, ser du, at det forsvinder med det samme.

For at løse dette problem, skal du tilføje håndtere drop begivenheden.

• Først skal du hente id for det trækkelige element ved hjælp af getData() -metoden til dataTransfer objekt.
• For det andet skal du tilføje det trækbare element som et underordnet element i drop target-elementet.
• For det tredje skal du fjerne hide klasse fra draggable elementet.

Den følgende kode viser det komplette drop event handler:

Hvis du trækker og slipper elementet, der kan trækkes nu, skal det fungere som forventet.

Følgende viser den komplette app.js-fil:

Og her er linket til demoen.

Resume

• Tilføj draggable egenskaben med værdien sand til et element for at gøre det trækkeligt.
• dragstart, drag og dragend begivenheder affyrer det trækbare element.
• dragenter, dragover, eller drop begivenheder udløses på drop target.
• Ring til event.preventDefault() på dragenter og dragover begivenhedshåndterere for at gøre et element til et gyldigt drop target.
• Brug event.dataTransfer objekt med setData() og getData() metoder til at overføre data i træk-og-slip-operationen.