Hvordan til å Dra & Slipp HTML-Elementer og Filer ved hjelp av Javascript

Hvis du vil definere en drop-effekten, følgende fremgangsmåte må følges:

5.1. Bestemme Tillatt Drop-Effekten(e) på Draggable Element i det dragstart hendelseshåndterer

ved Hjelp av effectAllowed eiendom på dataTransfer event eiendom, kan du definere alle fall effekter som er tillatt å bli brukt for at draggable element.

Dette er gjort så forskjellige drop steder kan være definert og ulike slipp effekter kan håndteres per slippe beliggenhet.,

tabellen nedenfor definerer de mulige effectAllowed eiendom verdier basert på MDN dokumenter:

5.2. For hver Dråpe Beliggenhet, Definere Drop-Effekten(e) for det i det dragover hendelseshåndterer

for å bli definert slippe virkningen må være en av de tillatte virkninger bestemt på dragstart hendelseshåndterer av kilden beliggenhet.,

Når en dråpe-effekten er ikke en av de tillatte slipp effekter, det vil bli satt til én av de tillatte slipp effekter.

dragover handler, hvor drop-effekten bør være definert, er utført når dratt element blir dratt over en mulig nedgang beliggenhet.

følgende er et eksempel på å definere slippe virkninger for en bestemt slippe beliggenhet.

6) Definerer en Drop Zone (Drop Sted)

som standard, noe element i HTML-dokumentet, kan en dråpe., Imidlertid, som kan endres, og for å gjøre et element i en slippsone, det må ha:

• ondragover event handler, som utføres når det draggable element blir dratt over dette elementet. I dette tilfelle handler, kan den slippe virkningen av slippe beliggenhet er definert som tidligere nevnt i trinn 5.2.
• ondrop event handler, som er utført når draggable element er falt i dra sted/sone.

følgende er et eksempel på å definere et element som en dråpe beliggenhet.,

I både dragover og slipp-event-handlere, preventDefault() må være kalt til å la en dråpe som det indikerer at en dråpe er tillatt på dette stedet.

Hvis en dråpe vil bare være tillatt i visse situasjoner der forholdene er brukt, så bare legge til preventDefault hvis vilkårene for at en dråpe er oppfylt. Dette er gjort for å hindre at elementet være en slippsone hvis vilkårene ikke er oppfylt hvor slippe bør ikke være tillatt.,

Avvise en dråpe basert på den type data dra i dataTransfer eiendommen er en felles sak. Følgende eksempel viser at ved å tillate lenker til å bli droppet i slippsonen element som har dragover handler.

7) Håndtere Element Dropp

Under drop-event, dra data skal behandles. For å gjøre det, getData () – metoden på dataTransfer tilfelle eiendommen er brukt.,

getData() metode som henter dra elementer som det tar et enkelt argument av typen av data, til å hente og det vil returnere strengen verdi knyttet til det.

allowedEffect og dropEffect egenskaper er med på å styre de tilbakemeldinger som vil bli presentert for brukeren.

Håndtering av slike tilbakemeldinger er ansvaret for utvikleren, og skal være implementert i drop hendelseshåndterer. For eksempel, gjenopprette et element, og legge det til en annen forelder vil flytte den, men kopiering noden vil resultere i en kopi effekt.,

Hvis flere slipp effekter er definert for en eneste dråpe sone, dropEffect eiendommen skal brukes til å avgjøre hvilke dra operasjonen var ønsket for denne spesielle slippe event.

følgende er et eksempel på håndtering av en dråpe.

noen Ganger, du kan ha støttet ulike typer av samme data, men bare ønsker å hente den mest spesifikke type. Følgende kode fra MDN dokumenter viser at.,

8) Bruk dragend Begivenhet for å Sjekke om Fall ble Vellykket

På slutten av en dra-operasjon, en dragend hendelse utløses ved kilden element. Arrangementet branner om å dra var vellykket eller ble avbrutt.

for Å sjekke om de drar operasjonen var vellykket eller ikke, er verdien av dropEffect kan kontrolleres som følgende:

• Hvis dropEffect eiendommens verdi er «ingen» i dragend event handler, så det betyr at dra-operasjoner ble avlyst.,
• Ellers, verdien av dropEffect eiendom er den operasjonen som ble utført med hell.

Hmm, så hvordan er dette nyttig?

kilde element kan bruke denne informasjonen etter en vellykket flytte operasjon for å fjerne dratt element fra den gamle plasseringen.

Demo på HTML-Element Dra & Utelat

Merk: du kan også klone prosjektet fra min Github her.,

1) Detect the Drag & Drop Feature Support in Your Browser

Before using the HTML drag & drop API, add feature detection code to ensure browser support.

The following code is the feature detection code for the HTML drag & drop API from Modernizr.,

2) Definere en Drop Zone (Drop Sted)

som standard, noe element i HTML-dokumentet, kan en dråpe. Imidlertid, som kan endres, og for å gjøre et element i en slippsone, det må ha:

• ondragover event handler, som er utført når filen(e) er/blir dratt over drop beliggenhet.
• ondrop event handler, som er utført når filen(e) er lagt i drop beliggenhet.,

Som det fremgår av MDN dokumenter:

dragstart og dragend hendelser er ikke sparken når du drar en fil i leseren fra OS.

følgende er et eksempel for å definere et element som en dråpe beliggenhet.

3) Håndtere Filen ‘ s Drop

Når brukeren mister filen(e) i en drop zone, en dråpe hendelsen vil bli utløst. Under drop-event, filen(e) skal behandles som ønsket.,

for Å få tilgang til hver droppet filen, bruker arrangementet er DataTransfer eiendom for å få tilgang til filer eiendom. Etter få tilgang til en droppet filen, bruker du Fil-API til å behandle den.

Hvis nettleseren din støtter DataTransferItemList eiendommen, kan du bruke den med getAsFile () – metoden i stedet for å bruke DataTransfer eiendommen for å få tilgang til filen.

I både dragover og slipp-event-handlere, preventDefault() må være kalt til å la en dråpe som det indikerer at en dråpe er tillatt på dette stedet., Det forhindrer filer fra å bli åpnet, som er standard oppførsel, som oppstår ved sletting av en fil i en web-side.

Hvis en dråpe vil bare være tillatt i visse situasjoner der forholdene er brukt, så bare legge til preventDefault hvis vilkårene for at en dråpe er oppfylt. Dette er gjort for å hindre at elementet være en slippsone hvis vilkårene ikke er oppfylt hvor slippe bør ikke være tillatt.

følgende eksempel fra MDN dokumenter, demonstrerer behandling droppet filer, hvor en drar du elementet er ikke en fil som er ignorert., Both possible ways are demonstrated in this

Demo on HTML Element’s Drag & Drop

Note: you can also clone the project from my Github here.

---