Kode

Sådan bruges HTML5's Træk og slip

I længe har JavaScript-funktioner eksisteret, der giver os mulighed for at oprette træk og slip-grænseflader, men ingen af ​​disse implementeringer var native til browseren.

I HTML5 har vi en indbygget metode til at oprette træk og slip-grænseflader (med lidt hjælp fra JavaScript).

Jeg vil fortælle dig, hvordan du opnår dette ...

Browser support

Jeg vil gerne få det ud af vejen, før vi går videre: i øjeblikket understøttes HTML5 drag and drop af alle større desktopbrowsere (herunder IE (selv IE 5.5 har delvis støtte)), men det understøttes ikke af nogen af ​​de populære mobile mobiler browsere.

Træk og slip begivenheder

I hvert trin i træk og slip operationen er en anden begivenhed fyret, så browseren ved, hvilken JavaScript kode der skal udføres begivenhederne er:

  • dragstart: brande, når brugeren begynder at trække elementet.
  • dragEnter: brande, når det trækbare element først trækkes over målelementet.
  • dragOver: brande, når musen flyttes over et element, når træket forekommer.
  • dragLeave: fyret hvis brugerens markør forlader et element, når du trækker.
  • træk: Brande hver gang vi flytter musen under træning af vores element.
  • drop: fyret når den faktiske dråbe udføres.
  • dragEnd: brænder, når brugeren løser musen, mens du trækker objektet.

Med alle disse lyttere har du stor kontrol over, hvordan din grænseflade fungerer, og præcis hvordan den udfører under forskellige omstændigheder.

DataTransfer-objektet

Det er her, hvor alt drag og slip magien sker; Dette objekt indeholder de data, der blev sendt af trækoperationen. Dataene kan indstilles og hentes på forskellige måder, de vigtigste er:

  • dataTransfer.effectAllowed = value: dette returnerer de typer handlinger tilladt, mulige værdier er ingen, kopiere, copyLink, copyMove, link, linkMove, flytte, alle og uninitialized.
  • dataTransfer.setData (format, data): tilføjer de angivne data og dets format.
  • dataTransfer.clearData (format): Rydder alle dataene til et bestemt format.
  • dataTransfer.setDragImage (element, x, y): Sæt det billede, du ønsker at trække, x- og y-værdierne angiver, hvor musemarkøren skal være (0, 0 placerer den øverst til venstre).
  • data = dataTransfer.getData (format): Som navnet siger, returnerer de tilgængelige data til et bestemt format.

Oprettelse af et drag og slip eksempel

Nu vil vi begynde at skabe vores simpel træk og slip eksempel, du kan se, at vi har to små divs og en større, vi kan trække og slippe de små i den store og vi kan endda flytte dem tilbage.

Træk objektet

Det første, vi skal gøre, er at oprette vores HTML. Vi gør de divs, der kan trækkes med den trækbare attribut, som sådan: 

draggable="true">

Når dette er gjort, skal vi definere javascript-funktionen, der kører, når vi begynder at trække dette element: 

function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));   ev.dataTransfer.setDragImage(ev.target,100,100);return true;}

I denne kode erklærer vi først, hvilken type effekt vi tillader i operationen, og vi sætter det for at flytte. I anden linje sætter vi dataene til operationen, og i dette tilfælde er typen Tekst og værdien er elementets ID vi trækker Herefter bruger vi setDragImage- metoden til at indstille, hvad vi vil trække og hvorefter markøren skal være under træk, og da kuberne er 200 ved 200px, placerede jeg det i centrum. Endelig vender vi tilbage sandt.

Drop objektet

For at et element skal acceptere en dråbe, skal det lyttes til 3 forskellige begivenheder: dragEnter, dragOver og også drop- eventet, så lad os tilføje dette til vores html i div med big ID:

Nu hvor vi tilføjede begivenhedslyttere, skal vi oprette disse funktioner, vi starter med dragenter og overdragelsesbegivenheder: 

function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}

I den første funktion definerer vi hvad vi ønsker at ske, når det element, vi trækker, når elementet, det skal falde ind i. I dette tilfælde forhindrer vi kun browserens standardadfærd, men du kan gøre et vilkårligt antal ting som forandre baggrund eller tilføj nogle tekst for at indikere, at brugeren trækker til det korrekte område, og ved hjælp af dragleave-begivenheden kan du vende tilbage de ændringer, du har foretaget. Næste i dragOver- funktionen forhindrer vi simpelthen standardværdien til at tillade dråben.

Den næste del er, hvor vi definerer funktionen for, når vi faktisk slipper elementet på det ønskede mål: 

function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}

I denne sidste del indstiller vi først en variabel kaldet data, hvor vi får alle de data, der er tilgængelige for tekstformatet, og så tilføjer vi de data (som er det element, vi trækker) til div, hvor vi ønsker at droppe elementet. Endelig rører nogle finale som at stoppe udbredelse og også returnere falsk.

Gør sektionen et drop-mål

Kontrol demoen , kan du se, at vi også sørgede for, at de to divs kunne trækkes tilbage til deres oprindelige placering. Heldigvis kan tilføje et andet drop-mål være enklere end du tror; fordi funktionerne allerede er på plads, er alt, hvad vi skal gøre, tilføjet begivenhedslytterne, som sådan:

Og det er alt, hvad vi har brug for, for at tillade at trække divs til det oprindelige sted.

Konklusion

Der er masser af træk og slip applikationer bygget ved hjælp af JavaScript-biblioteker, og det er ofte lettere at bruge disse biblioteker. Men jeg håber, at i denne HTML5 & JavaScript-teknik ser du fremtidens potentiale i den native løsning.

Har du bygget en træk og slip interface? Hvordan sammenligner native HTML5 med rene JavaScript-løsninger? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, slip billede via photophilde.

ux design