Kóði

Hvernig á að nota Dragðu og sleppa HTML5

Í langan tíma hefur JavaScript virka verið til sem gerir okkur kleift að búa til slá og sleppa tengi, en ekkert þessara framkvæmda var innfæddur í vafranum.

Í HTML5, höfum við innfæddur aðferð til að búa til sleppa og sleppa tengi (með smá hjálp frá JavaScript).

Ég ætla að láta þig vita hvernig á að ná þessu ...

Vefur stuðningur

Mig langar til að fá þetta út úr því áður en við vorum: Nú er HTML5 dregið og sleppt stutt af öllum helstu skjáborðum (þ.mt IE (jafnvel IE 5.5 hefur hluta stuðning)) en það er ekki stutt af einhverjum vinsælum farsíma vafra.

Dragðu og slepptu viðburðum

Á hverju stigi draga og sleppa aðgerðinni er annar atburður rekinn þannig að vafrinn veit hvað JavaScript kóða til að framkvæma; atburðirnir eru:

  • dragStart: eldar þegar notandinn byrjar að draga þáttinn.
  • dragEnter: eldar þegar dregur þáttur er fyrst dreginn yfir markmiðjan.
  • dragOver: eldar þegar músin er flutt yfir frumefni þegar dregið er fram.
  • dragLeave: rekinn ef bendill notandans skilur þátt í því að draga.
  • draga: eldar í hvert skipti sem við hreyfum músina þegar þú dregur þáttinn okkar.
  • slepptu: rekinn þegar raunverulegt niðurfall er framkvæmt.
  • dragEnd: eldar þegar notandinn sleppur músinni á meðan að draga hlutinn.

Með öllum þessum atburðum hlustendum hefur þú mikla stjórn á því hvernig tengi þín virkar og nákvæmlega hvernig það virkar við mismunandi aðstæður.

DataTransfer mótmæla

Þetta er þar sem allir draga og sleppa galdur gerist; Þessi hlutur geymir gögnin sem send voru með aðgerðinni sem draga. Gögnin geta verið sett og sótt á ýmsan hátt, mikilvægustu eru:

  • dataTransfer.effectAllowed = value: þetta skilar tegundum aðgerða sem leyft er, möguleg gildi eru enginn, afrita, copyLink, copyMove, tengil, linkMove, færa, allt og óendanlegt.
  • dataTransfer.setData (snið, gögn): bætir við tilgreind gögn og snið þess.
  • dataTransfer.clearData (snið): hreinsar öll gögnin fyrir tiltekið snið.
  • dataTransfer.setDragImage (frumefni, x, y): setur myndina sem þú vilt draga, x og y gildin tilgreina hvar músarbendillinn ætti að vera (0, 0 setur hann efst til vinstri).
  • gögn = dataTransfer.getData (snið): Eins og nafnið segir, skilar það gögnin sem eru tiltæk fyrir tiltekið snið.

Búðu til dæmi um að draga og sleppa

Nú munum við byrja að búa til okkar einfaldur draga og sleppa dæmi, þú getur séð að við höfum tvær litlir divs og stærri, við getum dregið og sleppt þeim litlum innan stóra og við getum jafnvel flutt þau aftur.

Dragðu hlutinn

Það fyrsta sem við þurfum að gera er að búa til HTML okkar. Við gerum skiltin sem hægt er að draga með draggable eiginleiki, eins og svo: 

draggable="true">

Þegar þetta er gert verðum við að skilgreina javascript virka sem mun hlaupa þegar við byrjum að draga þennan þátt: 

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

Í þessum kóða lýsum við fyrst fyrir hvaða tegund af áhrifum við leyfum í aðgerðinni og við stillum það til að færa, í annarri línu setjum við gögnin fyrir aðgerðina og í þessu tilfelli er tegundin Texti og gildið er auðkenni frumefnisins við erum að draga. Eftir þetta notum við setDragImage aðferðina til að stilla hvað við munum draga og þá þar sem bendillinn verður á meðan að draga, og þar sem teningur er 200 með 200px setti ég það á miðju. Að lokum skilum við aftur satt.

Sleppa hlutnum

Til þess að þáttur geti tekið við dropi þarf að hlusta á 3 mismunandi viðburði: dragEnter, dragOver og einnig dropahættið svo við skulum bæta þessu við HTML okkar í Div með kennitölu stórs:

Nú þegar við bættum viðburðum hlustendum þurfum við að búa til þessar aðgerðir sem við munum byrja með dráttarvélin og dráttarvefinn: 

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

Í fyrsta aðgerðinni skilgreinum við það sem við viljum gerast þegar þátturinn sem við erum að draga nær til frumefnisins sem það er að falla í, í þessu tilviki koma aðeins í veg fyrir sjálfgefna hegðun vafrans en þú getur gert nokkrar hluti eins og að breyta bakgrunnur eða bæta við smá texta til að gefa til kynna að notandinn dragi til rétta svæðisins og með því að nota dragleave atburðinn geturðu breytt þeim breytingum sem þú hefur gert. Næst í aðgerðinni dragOver koma í veg fyrir að sjálfgefið sé að leyfa dropanum .

Næsta hluti er þar sem við skilgreinir virkni fyrir þegar við fallum í raun þáttinn á viðkomandi mark: 

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

Í þessum síðasta hluta setjum við fyrst breytu sem kallast gögn þar sem við fáum öll gögnin sem eru tiltæk fyrir textasniðið og þá bætum við þau gögn (sem verða þátturinn sem við erum að draga) við div þar sem við viljum falla þátturinn. Að lokum snertir endanlega eins og að stoppa fjölgun og einnig koma aftur á ósatt.

Gerðu hlutann fallmark

Athuga kynningu , getum við séð að við gerðum einnig viss um að tveir deildirnar gætu verið dregnar aftur til upprunalegu staðsetningar þeirra. Til hamingju með að bæta við öðrum dropamarki getur verið einfaldara en þú heldur; vegna þess að aðgerðirnar eru nú þegar til staðar, þá þurfum við aðeins að bæta við viðburðum hlustendum, eins og svo:

Og það er allt sem við þurfum til til að leyfa að sleppa þeim frá upphafi.

Niðurstaða

Það eru fullt af forritum sem draga og sleppa, byggt með JavaScript-bókasöfnum, og það er oft einfaldara að nota þær bókasöfn. En ég vona að í þessari HTML5 og JavaScript tækni sjáum við framtíðar möguleika innfæddrar lausnar.

Hefur þú búið til að draga og sleppa tengi? Hvernig er HTML5 í samanburði við hreint JavaScript-lausnir? Láttu okkur vita í athugasemdunum.

Valin mynd / smámynd, slepptu mynd um photophilde.

vefhönnun