från HTML5 är det möjligt att dra och släppa HTML-element i en HTML-sida. Via JavaScript händelse lyssnare kan du bestämma vad som händer när användaren drar och droppar element.
Under dra och släpp HTML-element kan ta på sig två roller:
- dragbar
- Drop target / drop zone.
det dragbara elementet är det element som användaren ska kunna dra runt HTML-sidan och släppa någonstans, för att vissa åtgärder ska inträffa. Detta kan vara ett eller flera element.,
droppmålet eller droppzonen är det element som de dragbara elementen tappas på.
dra och släpp händelser
för att styra vad som händer när du drar och släpper HTML-element måste du utföra 3 steg:
- Ställ in HTML-elementen på dragbara.,
- bifoga händelselyssnare till de draggbara HTML-elementen
- bifoga händelselyssnare till HTML-elementen för drop target
händelserna och attributen illustreras här:
först anger du attributet draggable="true" på HTML-elementet(erna) för att göra draggbara.
För det andra bifogar du händelselyssnare på det dragbara elementet för händelsernadragstart ochdragend., Inuti dessa händelselyssnare kan du implementera vad som ska hända när användaren börjar dra elementet och när draget slutar.
tredje du bifogar händelselyssnare på släppmålselementet. De händelser du kan lyssna på är dragenter, dragover, dragleave och drop.
dragenter händelse avfyras när användaren drar den dragbara på släppmålet., Denna händelse bränder bara när det dragbara elementet ändras från att vara utanför till att vara över, vilket vanligtvis bestäms av muspekarens position.
När det dragbara elementet är över drop-målet, skjuter dragover – händelsen och fortsätter att skjuta så länge det dragbara elementet dras över drop-målet.
om användaren drar ut det dragbara objektet ur droppmålet igen, avfyras händelsen dragleave.
om användaren släpper det dragbara objektet på släppmålet avfyras händelsen drop.,
dra och släpp Händelseexempel
Här är ett exempel Du kan spela med. Försök att dra HTML5-logotypen till drop-målet och se vad som händer. Försök båda släppa bilden och dra ut den igen.
dragend:
dragenter:
dragover:
dragleave:
drop:
dra och släpp kod
låt oss ta en titt på hur du hanterar dra och släpp händelser., För att se att vi först skapar ett<img> – element som vi kan dra. Här är HTML-koden för det:
<img src="http://tutorials.jenkov.com/html5/..." draggable="true">
När vi har ett dragbart element behöver vi ett släppmål. Jag kommer att använda ett <div> – element:
<div style="width: 200px; height: 200px;">Drop here</div>
När vi har det dragbara elementet och släppmålselementet måste vi fästa händelselyssnarna., Här är JavaScript-koden för det:
funktionen dragStart() anropar event.dataTransfer.setData() för att ställa in data som överförs till droppmålet när elementet släpps. Oavsett data du behöver för att korrekt avsluta drop-åtgärden, ställ den här. Du anger både data och dess mime-typ.
dragOver() ochdrop() händelsehanterare kallar bådaevent.preventDefault() och returnerar FALSKT. Detta är nödvändigt för att dra och släppa fungerar korrekt., Webbläsaren kan ha vissa standard dra och släpp beteende som du behöver inaktivera för att få din kod att fungera.
Observera också att funktionendrop() händelsehanterare läser datauppsättningen idragStart() via anropet tillevent.dataTransfer.getData(). Den passerar mime – typen av data som parameter för att korrekt extrahera den.
det här är allt som behövs för att implementera dra och släpp i HTML5. Du kan göra det lite mer visuellt tilltalande men, som vi kommer att se i nästa avsnitt.,
visuell återkoppling
Du kan använda funktionerna dra och släpp händelsehanterare för att ge användaren mer explicit visuell återkoppling.
först och främst kan du markera elementet som dras så att användaren kan se vilket element han eller hon drar. Om flera element ser likadana ut och de kan alla dras, är det trevligt för användaren att se vilken som släpas. Du kan göra det som svar på händelsendragstart. Här är ett exempel:
När dragen slutar vill vi dock ta bort gränsen igen., Detta görs som svar på händelsendragend. Så här gör du:
nu får användaren visuell feedback som visar vilket element som dras.
vi vill också visa användaren att det är möjligt att släppa det dragbara elementet när det dras över släppmålet. Återigen kommer vi att ändra gränsen för elementet. Vi kommer att göra det som svar pådragenter,dragleave ochdrop händelser., Så här görs det:
nu blir gränsen för droppmålet grönt och streckat när det dragbara elementet dras över det. Gränsen kommer att tas bort när det dragbara elementet dras ut igen, eller om elementet släpps på släppmålet.
exemplet ovan visade inte funktionendragOver() händelsehanterare, men se till att du lägger till den för att förhindra standardwebbläsarens beteende.,
här är den fullständiga koden efter att den visuella återkopplingen har lagts till:
DataTransfer-objektet, effectsAllowed, dropEffect och setDragImage()
Du kan öka den visuella återkopplingen som ges till användaren under dra och släpp-åtgärder med hjälp av DataTransfer – objektet. ObjektetDataTransfer har 2 attribut och en funktion som du kan använda för detta ändamål., Dessa är:
- effectsAllowed
- dropEffect
- setDragImage()
Du har tillgång till objektet DataTransfer I objektet dragstart och drop händelseobjekt. Här är ett exempel dragstart lyssnarfunktion som anger egenskapen effectsAllowed på objektetDataTransfer:
egenskapeneffectsAllowed används av webbläsarna för att ändra muspekaren för att visa vilken typ av åtgärd som utförs när du drar och släpper ett element., Vanligtvis ändras muspekaren när det dragna elementet är över ett släppmål. Inte tidigare. Giltiga värden för egenskapen effectsAllowed är:
- ingen
- kopiera
- flytta
- copyMove
- länk
- linkMove
- copyLink
- Alla
- oinitierad
dropEffect ska visa användaren (via markören) vad som händer när musen svävar över ett släppmål, men vid skrivningstillfället (Feb. 2014) webbläsarna verkar ignorera detta., Giltiga värden för egenskapendropEffect är:
- ingen
- kopiera
- länk
- flytta
funktionensetDragImage(image, x, y) kan användas för att ställa in bilden som visas av webbläsaren när användaren drar ett element. Som standard visar webbläsaren en halvtransparent kopia av det ursprungliga elementet, men om du vill ha en annan bild kan du ställa in en annan bild med den här funktionen. Egenskapernax ochy kan användas för att ställa in platsavvikelser för bilden när den visas., Som standard ligger det övre vänstra hörnet av dragbilden vid muspekarens spets. Genom att ställa in olikax ochy egenskaper kan du ändra detta. Du kan använda antingen positiva eller negativax ochy förskjutningar.
här är ett kodexempel som visar hur du ställer in en dragbild inutidragStart() händelselyssnarfunktion:
Här är ett exempel som låter dig spela med de olika inställningarna påDataTransfer – objektet., Försök ändraeffectsAllowed och dra bilden och se vad som händer när du drar HTML5-logotypen ner över rullmåletdiv.
dra filer till webbläsaren
det är möjligt att dra filer till webbläsaren från filsystemet och läsa namnet och innehållet i de släpade filerna från JavaScript. Du gör det via HTML5 File API., Här är en drop mål lyssnare som upptäcker filnamnet på den släpade filen:
var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i Notice how the
function does not call the function, but instead accesses the property of the . The property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon). You can read more about how to access the dragged files in my HTML5 file API tutorial.