Koda

Så här använder du HTML5: s drag och släpp

Det har länge funnits JavaScript-funktioner som tillåter oss att skapa dra och släpp gränssnitt, men ingen av dessa implementeringar var inbyggda i webbläsaren.

I HTML5 har vi en inbyggd metod för att skapa dra och släpp gränssnitt (med lite hjälp från JavaScript).

Jag kommer att släppa in hur du uppnår detta ...

Webbläsarstöd

Jag skulle vilja få det här ur vägen innan vi utvecklas: För närvarande stöds HTML5 dra och släpp av alla större skrivbordswebbläsare (inklusive IE (även IE 5.5 har delvis stöd)) men det stöds inte för närvarande av någon av de populära mobilerna webbläsare.

Dra och släpp händelser

Vid varje steg i drag- och släppoperationen avfyras en annan händelse så att webbläsaren vet vilken JavaScript-kod som ska utföras. händelserna är:

  • dragStart: bränder när användaren börjar dra elementet.
  • dragEnter: bränder när det draggbara elementet släpas först över målelementet.
  • dragOver: bränder när musen flyttas över ett element när draget uppträder.
  • dragLeave: avbruten om användarens markör lämnar ett element när du drar.
  • dra: bränder varje gång vi flyttar musen under draget av vårt element.
  • droppe: avfyras när den faktiska droppen utförs.
  • dragEnd: brinner när användaren släpper musen medan du drar objektet.

Med alla dessa lyssnare har du mycket kontroll över hur ditt gränssnitt fungerar och exakt hur det fungerar under olika omständigheter.

DataTransfer-objektet

Det här är där allt dra och släpp magi händer; Detta objekt innehåller data som skickades av dragoperationen. Uppgifterna kan ställas in och hämtas på olika sätt, de viktigaste är:

  • dataTransfer.effectAllowed = value: detta returnerar typerna av åtgärder tillåtna, möjliga värden är ingen, kopiera, copyLink, copyMove, länk, linkMove, flytta, allt och uninitialized.
  • dataTransfer.setData (format, data): lägger till angivna data och dess format.
  • dataTransfer.clearData (format): rensar all data för ett visst format.
  • dataTransfer.setDragImage (element, x, y): ställer in bilden du vill dra, x- och y-värdena anger var muspekaren ska vara (0, 0 placerar den till vänster).
  • data = dataTransfer.getData (format): Som namnet säger returnerar den tillgängliga data för ett visst format.

Skapa ett dra och släpp exempel

Nu börjar vi skapa vår enkelt dra och släpp exempel, du kan se att vi har två små div och en större, vi kan dra och släppa de små i den stora och vi kan även flytta dem tillbaka.

Dra objektet

Det första vi behöver göra är att skapa vår HTML. Vi gör divsna draggable med dragbar attribut, som så: 

draggable="true">

När detta är klart måste vi definiera javascript-funktionen som körs när vi börjar dra det här 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 denna kod förklarar vi först vilken typ av effekt vi tillåter i operationen och vi ställer in det för att flytta, i den andra raden anger vi data för operationen och i detta fall är typen Text och värdet är elementets ID vi drar Efter detta använder vi setDragImage- metoden för att ställa in vad vi ska dra och sedan där markören kommer att vara medan du drar, och eftersom kuberna är 200 vid 200px placerar jag det i centrum. Äntligen återkommer vi sant.

Att släppa objektet

För att ett element ska kunna acceptera en droppe behöver man lyssna på 3 olika händelser: dragEnter, dragOver och även dropphändelsen så låt oss lägga till detta i vår html i div med stora ID:

Nu när vi lagt till händelse lyssnare måste vi skapa dessa funktioner vi börjar med dragenter och dragover händelser: 

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

I den första funktionen definierar vi vad vi vill hända när det element vi drar når det element som det ska tappas i. I det här fallet förhindrar vi bara webbläsarens standardbeteende, men du kan göra något antal saker som att ändra bakgrund eller lägg till lite text för att indikera att användaren drar till rätt område och med dragleave-händelsen kan du återställa de ändringar du gjort. Nästa i dragOver- funktionen förhindrar vi helt enkelt att standarden tillåter droppen.

Nästa del är där vi definierar funktionen för när vi faktiskt släpper elementet på önskat mål: 

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

I den här sista delen ställer vi först en variabel som heter data där vi får alla data som är tillgängliga för textformatet och då lägger vi till den data (vilken blir det element som vi drar) till div där vi vill släppa elementet. Slutligen berörs några slutliga slutar som att stoppa utbredning och återkommer också falskt.

Gör avsnittet ett drop-mål

Kontroll demo , kan du se att vi också försäkrade att de två delarna kunde dras tillbaka till sin ursprungliga plats. Lyckligtvis kan lägga till ett annat droppmål vara enklare än du tror; Eftersom funktionerna redan är på plats, är det bara att lägga till händelselyttarna, så här:

Och det är allt vi behöver för att tillåta att dra av divs till den ursprungliga platsen.

Slutsats

Det finns många dra och släppa applikationer som byggts med hjälp av JavaScript-bibliotek, och det är ofta enklare att använda dessa bibliotek. Men jag hoppas att i den här HTML5 & JavaScript-tekniken ser du den framtida potentialen hos den inbyggda lösningen.

Har du byggt ett dra och släpp-gränssnitt? Hur jämförs native HTML5 med rena JavaScript-lösningar? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, släpp bilden via photophilde.

användbarhet