Kode

Slik bruker du HTML5s dra og slipp

I lang tid har JavaScript-funksjoner eksistert som tillater oss å lage dra og slipp-grensesnitt, men ingen av disse implementasjonene var innfødt i nettleseren.

I HTML5 har vi en innfødt metode for å lage dra og slipp-grensesnitt (med litt hjelp fra JavaScript).

Jeg skal fortelle deg hvordan du skal oppnå dette ...

Nettleserstøtte

Jeg vil gjerne få dette ut av veien før vi utvikler: for øyeblikket er HTML5 dra og slipp støttet av alle de store nettleserne (inkludert IE (selv IE 5.5 har delvis støtte)), men det støttes ikke for øyeblikket av noen av de populære mobilene lesere.

Dra og slipp hendelser

I hvert trinn av dra og slipp operasjonen en annen begivenhet er sparket slik at nettleseren vet hva JavaScript-kode skal utføre; hendelsene er:

  • dragstart: branner når brukeren begynner å dra elementet.
  • dragEnter: branner når det trekkbare elementet først trekkes over målelementet.
  • dragOver: branner når musen flyttes over et element når dragen oppstår.
  • dragLeave: sparket hvis brukerens markør forlater et element når du drar.
  • dra: branner hver gang vi beveger musen under drakking av elementet vårt.
  • slipp: sparken når den faktiske dråpen utføres.
  • dragEnd: branner når brukeren slipper musen mens du drar objektet.

Med alle disse hendelseslytterne har du mye kontroll over hvordan grensesnittet fungerer og nøyaktig hvordan det utføres under ulike forhold.

DataTransfer-objektet

Det er her hvor alt dra og slipp magien skjer; Dette objektet inneholder dataene som ble sendt av draoperasjonen. Dataene kan settes og hentes på ulike måter, de viktigste er:

  • dataTransfer.effectAllowed = value: dette returnerer typer handlinger tillatt, mulige verdier er ingen, kopiere, copyLink, copyMove, link, linkMove, flytte, alt og uninitialized.
  • dataTransfer.setData (format, data): legger til de angitte dataene og formatet.
  • dataTransfer.clearData (format): sletter alle dataene for et bestemt format.
  • dataTransfer.setDragImage (element, x, y): Angir bildet du ønsker å dra, x- og y-verdiene angir hvor musepekeren skal være (0, 0 plasserer den øverst til venstre).
  • data = dataTransfer.getData (format): Som navnet sier, returnerer de tilgjengelige dataene for et bestemt format.

Opprette et dra og slipp-eksempel

Nå skal vi begynne å lage vår enkelt dra og slipp eksempel, du kan se at vi har to små divs og en større, vi kan dra og slippe de små i den store, og vi kan til og med flytte dem tilbake.

Dra objektet

Det første vi må gjøre er å lage vår HTML. Vi gjør divsene draggable med draggable attributtet, slik som: 

draggable="true">

Når dette er gjort må vi definere javascript-funksjonen som vil løpe når vi begynner å dra dette elementet: 

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 koden erklærer vi først hvilken type effekt vi tillater i operasjonen, og vi setter det for å flytte, i den andre linjen angir vi dataene for operasjonen og i dette tilfellet er typen Tekst og verdien er elementets ID vi drar Etter dette bruker vi setDragImage- metoden til å angi hva vi skal dra og deretter hvor markøren skal være mens du drar, og siden kubene er 200 ved 200px plasserte jeg det i sentrum. Til slutt returnerer vi sant.

Fjerne objektet

For at et element skal kunne akseptere en dråpe, må det høres på 3 forskjellige hendelser: dragEnter, dragOver og også drop- eventet, så la oss legge til dette i vår html i div med ID for big:

Nå som vi har lagt til hendelselyttere, må vi opprette disse funksjonene, og vi starter med drakter og drakthendelser: 

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

I den første funksjonen definerer vi hva vi vil skje når elementet vi drar når elementet som det skal tapt inn, i dette tilfellet forhindrer vi bare nettleserens vanlige oppførsel, men du kan gjøre et hvilket som helst antall ting som forandre bakgrunn eller legg til litt tekst for å indikere at brukeren drar til riktig område, og ved hjelp av dragleave-hendelsen kan du tilbakestille endringene du har gjort. Neste i dragOver- funksjonen forhindrer vi simpelthen standarden til å tillate dråpen.

Neste del er hvor vi definerer funksjonen for når vi faktisk slipper elementet på ønsket mål: 

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

I denne siste delen setter vi først en variabel som heter data der vi får alle dataene som er tilgjengelige for tekstformatet, og deretter legger vi til dataene (som blir det elementet vi drar) til div hvor vi ønsker å slippe elementet. Endelig kommer noen endelige berører som å stoppe forplantning og også returnere falsk.

Gjør delen et slipmål

Kontrollere demoen , kan du se at vi også sørget for at de to divene kunne bli trukket tilbake til deres opprinnelige plassering. Heldigvis kan legge til et annet dråpemål være enklere enn du tror; Fordi funksjonene allerede er på plass, er alt vi trenger å legge til hendelseslytterne, slik som:

Og det er alt vi trenger for å tillate å dra av divs til det opprinnelige stedet.

Konklusjon

Det er mange dra og slipp applikasjoner bygget ved hjelp av JavaScript-biblioteker, og det er ofte enklere å bruke disse bibliotekene. Men jeg håper at i denne HTML5 og JavaScript-teknikken ser du fremtidens potensial for den opprinnelige løsningen.

Har du bygget et dra og slipp-grensesnitt? Hvordan sammenligner native HTML5 med rene JavaScript-løsninger? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, slipp bildet via photophilde.

brukervennlighet