Fra HTML5-det er mulig å dra og slippe HTML-elementer inne i en HTML-side. Via JavaScript event lyttere du kan bestemme hva som skjer når brukeren drar og slipper elementer.
i Løpet av dra-og-slipp-HTML-elementer kan ta på to roller:
- Draggable
- Drop target / drop zone.
draggable element er elementet som brukeren skal være i stand til å dra rundt på en HTML-side og slippe et sted, for noen handling som skal skje. Dette kan være en eller flere elementer.,
drop target eller drop zone er elementet på som draggable elementer er droppet.
Dra-og-Slipp-Hendelser
for Å kontrollere hva som skjer når dra og slippe HTML-elementer, du trenger for å utføre trinn 3:
- Angi HTML-elementer til å draggable.,
- Fest event lyttere til draggable HTML-elementene
- Fest event lyttere til drop target HTML-elementene
hendelsene og attributter som er illustrert her:
Første du angi draggable="true" – attributtet på HTML-element(s) for å gjøre draggable.
Andre du fest event lyttere på draggable element for dragstart og dragend hendelser., Inne i disse tilfelle lyttere du kan implementere hva som skal skje når brukeren begynner å dra elementet, og når du drar ender.
Tredje du fest event lyttere på drop target element. Hendelsene du kan lytte til er dragenter, dragover, dragleave og drop.
dragenter hendelse utløses når brukeren drar draggable på drop target., Denne hendelsen bare utløses når draggable elementet endres fra å være utenfor til å være over, som er vanligvis bestemmes av posisjonen til musepekeren.
Når draggable element er over drop target, dragover event branner, og holder skyte så lenge draggable element blir dratt over drop target.
Hvis brukeren drar draggable objekt ut av drop target igjen, dragleave arrangementet er avfyrt.
Hvis brukeren slipper draggable objekt på drop target, drop arrangementet er avfyrt.,
Dra-og-Slipp-Event Eksempel
Her er et eksempel kan du spille med. Prøv å dra HTML5-logo på slipp-mål og se hva som skjer. Prøv begge slippe bildet og dra det ut igjen.
dragend:
dragenter:
dragover:
dragleave:
slipp:
Dra-og-Slipp-Kode
La oss ta en titt på hvordan de skal håndtere en dra og slipp-hendelser., Å se at vi vil først opprette en <img> – element som vi kan dra. Her er HTML-koden for det:
<img src="http://tutorials.jenkov.com/html5/..." draggable="true">
Når vi har en draggable elementet vi trenger er en dråpe mål. Jeg vil bruke en <div> – element:
<div style="width: 200px; height: 200px;">Drop here</div>
Når vi har draggable element, og slipp-mål element vi trenger til fest event lyttere., Her er JavaScript-kode for at:
dragStart() funksjonskall event.dataTransfer.setData() for å angi data som er overført til drop-mål når elementet er droppet. Uansett hvilken data du trenger for å riktig å fullføre slipp-handling, sett det her. Du har satt både data og dens mime-type.
dragOver() og drop() event handlers både ring event.preventDefault() og returnere false. Dette er nødvendig for å gjøre dra og slipp fungerer på riktig måte., Det kan hende at leseren har en viss standard dra og slipp atferd som du trenger for å deaktivere til å gjøre koden din fungerer.
legg også Merke til at drop() event behandleren leser data som er angitt i dragStart() via anrop til event.dataTransfer.getData(). Det går mime-typen av data som parameter for å riktig å trekke den.
Dette er alt som er nødvendig for å gjennomføre dra-og-slipp i HTML5. Du kan gjøre det litt mer visuelt tiltalende selv om, som vi skal se i neste avsnitt.,
Visuell Tilbakemelding
Du kan bruke dra-og-slipp-event handler funksjoner for å gi brukeren mer eksplisitt visuell tilbakemelding.
Først av alt, kan du merke elementet blir dratt slik at brukeren kan se hvilke element han eller hun er å dra. Hvis flere elementer se det samme, og de kan alle bli dratt, det er fint for brukeren å se noe som man blir dratt. Du kan gjøre det i respons til dragstart event. Her er et eksempel:
Når dra ender, vi ønsker å fjerne grensen igjen, skjønt., Dette er gjort i respons til dragend event. Her er hvordan det gjøres:
Nå vil brukeren få visuelle tilbakemeldinger som viser hvilket element blir dratt.
ønsker Vi også å vise brukeren at det er mulig å slippe draggable element når den er dratt over drop target. Igjen vil vi endre grensen av elementet. Vi vil gjøre det i respons til dragenter, dragleave og drop hendelser., Her er hvordan det gjøres:
Nå grensen av drop target vil bli grønn og stiplede når draggable element er dratt over det. Grensen vil bli fjernet når draggable element er dratt ut igjen, eller hvis elementet er droppet på drop target.
eksempelet ovenfor ikke viser dragOver() event behandleren, men sørg for at du legger den til å hindre standard nettleser atferd.,
Her er det full-kode etter den visuelle tilbakemeldinger har vært lagt til:
De DataTransfer Objekt, effectsAllowed, dropEffect og setDragImage()
Du kan øke visuell tilbakemelding er gitt til brukeren i løpet av dra og slipp handlinger ved bruk av DataTransfer objekt. DataTransfer objektet har 2 egenskaper og en funksjon du kan bruke til dette formålet., Disse er:
- effectsAllowed
- dropEffect
- setDragImage()
Du har tilgang til DataTransfer objekt i dragstart og drop event objekter. Her er et eksempel dragstart lytteren funksjon som setter effectsAllowed eiendom på DataTransfer objekt:
effectsAllowed – egenskapen brukes av nettlesere til å endre markøren til å vise hva slags handling som skal utføres når dra og slippe et element., Vanligvis musepekeren endres når den dras element som er over en dråpe mål. Ikke før. Gyldige verdier for effectsAllowed eiendel er:
- ingen
- kopier
- flytt
- copyMove
- link
- linkMove
- copyLink
- alle
- ikke initialisert
dropEffect er ment å vise brukeren (via markøren) hva skjer når musen svever over en dråpe mål, men i skrivende stund (feb. 2014) nettlesere ser ut til å ignorere dette., Gyldige verdier for dropEffect eiendel er:
- ingen
- kopier
- link
- flytt
setDragImage(image, x, y) funksjonen kan brukes hvis du vil angi bildet som vises i nettleseren når brukeren drar et element. Som standard nettleser viser en semi-transparent kopi av det opprinnelige elementet, men hvis du ønsker et annet bilde, kan du velge et annet bilde ved å bruke denne funksjonen. x og y egenskaper kan brukes for å angi plassering av kvoter for bilde når de vises., Som standard øverst i venstre hjørne av dra bildet er plassert på tuppen av musepekeren. Ved å sette ulike x og y egenskaper du kan endre dette. Du kan bruke enten positive eller negative x og y kvoter.
Her er en kode eksempel som viser hvordan du kan angi en dra bildet inni dragStart() event lytteren funksjon:
Her er et eksempel som lar deg spille med forskjellige innstillinger på DataTransfer objekt., Prøv å endre effectsAllowed og dra bildet og se hva som skjer når du drar HTML5-logoen ned over div slipp-mål.
Dra Filer Inn i Nettleseren
Det er mulig å dra filer inn i nettleseren fra filsystemet, og leser navnet på og innholdet av dratt filer fra JavaScript. Gjør du det via HTML5-Fil-API., Her er en drop target lytteren som registrerer hvilken fil av dratt file:
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.