Sådan trækkes og slippes HTML-elementer og filer ved hjælp af Javascript

for at definere en drop-effekt skal følgende trin følges:

5.1. Bestem den tilladte Drop-effekt (er) på det trækbare Element i det dragstart Event Handler

Ved hjælp af effectallo .ed-egenskaben på datatransfer event-egenskaben definerer du alle drop-effekter, der må anvendes til det trækbare element.

dette gøres, da forskellige drop-placeringer kan defineres, og forskellige drop-effekter kan håndteres pr.,

Den følgende tabel definerer det muligt effectAllowed ejendom værdier, der er baseret på MDN-dokumenter:

5.2. For hver Drop placering, definere Drop effekt (er) for det i det dragover hændelseshandler

den skal defineres drop effekt skal være en af de tilladte effekter bestemmes på dragstart hændelseshandler af kilden placering.,

Når en drop-effekt ikke er en af de tilladte drop-effekter, vil den blive indstillet til en af de tilladte drop-effekter.

dragover-handleren, hvor drop-effekten skal defineres, udføres, når det trækkede element trækkes over en mulig drop-placering.

følgende er et eksempel på at definere drop effekter for en bestemt drop placering.

6) Definere en Drop Zone (Drop Placering)

Som standard element i HTML-dokument, giver en dråbe., Det kan dog ændres, og for at gøre et element til en drop zoneone skal det have:

• ondragover-hændelseshåndtereren, som udføres, når det trækbare element trækkes over dette element. I denne hændelseshandler defineres drop-effekten af drop-placeringen som tidligere nævnt i trin 5.2.ondrop-hændelseshåndtereren, som udføres, når det trækbare element tabes i trækplaceringen / – zoneonen.

følgende er et eksempel på at definere et element som en drop-placering.,

I både dragover og drop event-handlere, preventDefault() skal være kaldet til at give en dråbe, da det indikerer, at en dråbe er tilladt på pågældende sted.

Hvis en dråbe kun er tilladt i visse situationer, hvor der anvendes betingelser, skal du kun tilføje preventDefault, hvis betingelserne for at tillade en dråbe er opfyldt. Dette gøres for at forhindre, at elementet er en drop zoneone, hvis betingelserne ikke er opfyldt, hvor drop ikke bør tillades.,afvisning af en dråbe baseret på typen af trækdata i datatransfer-egenskaben er et almindeligt tilfælde. Det følgende eksempel viser, at ved at tillade kun links, der skal droppes i drop elementone element, der har dragover handleren.

7) Håndtere Element Drop

I drop begivenhed, træk, data skal behandles. For at gøre det bruges getdata () – metoden på egenskaben dataTransfer event.,

getData () – metoden henter trækelementerne, da det kræver et enkelt argument for den type data, der skal hentes, og den returnerer den strengværdi, der er knyttet til den.

egenskaberne allo .edeffect og dropEffect hjælper med at kontrollere den feedback, der vil blive præsenteret for brugeren.

håndtering af sådan feedback er udviklerens ansvar og bør implementeres i drop event-handleren. For eksempel vil hentning af et element og tilføjelse af det til en anden forælder flytte det, men kopiering af noden vil resultere i en kopieringseffekt.,

Hvis der er defineret flere drop-effekter for en enkelt drop-zoneone, skal dropeffect-egenskaben bruges til at bestemme, hvilken trækoperation der var ønsket for denne særlige drop-begivenhed.

følgende er et eksempel på håndtering af en dråbe.

Nogle gange har du muligvis understøttet forskellige typer af de samme data, men vil kun hente den mest specifikke type. Følgende kode fra MDN docs viser det.,

8) Brug dragend Begivenhed for at Kontrollere, om faldet var Vellykket

i slutningen af et træk operation, en dragend begivenhed brande på source element. Begivenheden skyder, om trækket var vellykket eller blev annulleret.

for at kontrollere, om trækoperationen var vellykket eller ej, kan værdien af dropEffect kontrolleres som følgende:

• hvis dropEffect-egenskabens værdi er “ingen” i dragend-hændelseshåndtereren, betyder det, at trækoperationerne blev annulleret.,
• ellers er værdien af dropEffect-egenskaben den operation, der blev udført med succes.

Hmm, så hvordan er dette nyttigt?

kildeelementet kan bruge disse oplysninger efter en vellykket flytningsoperation til at fjerne det trækkede element fra den gamle placering.

Demo på HTML-Element Træk & Fjern

Bemærk: du kan også klone projekt 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 Placering)

Som standard element i HTML-dokument, giver en dråbe. Det kan dog ændres, og for at gøre et element til en drop zoneone skal det have:

• ondragover-hændelseshåndtereren, som udføres, når filen / filerne trækkes over drop-placeringen.ondrop event handler, som udføres, når filen/filerne er / er faldet i drop-placeringen.,

Som det fremgår af MDN-dokumenter:

dragstart og dragend begivenheder, som ikke er fyret, når du trækker en fil i browseren fra OS.

følgende er et eksempel til at definere et element som en drop-placering.

3) Håndtere Fil ‘ s Drop

Når brugeren falder den file(s) i en drop zone, en dråbe begivenhed, der vil blive udløst. Under drop-begivenheden skal filen / filerne behandles efter ønske.,

for at få adgang til hver droppet fil, skal du bruge begivenhedens datatransfer-egenskab for at få adgang til fileegenskaben. Når du har adgang til en droppet fil, skal du bruge File API til at behandle den.

Hvis bro .seren understøtter egenskaben DataTransferItemList, kan du bruge den med getasfile () – metoden i stedet for at bruge egenskaben DataTransfer til at få adgang til filen.

i både dragover og drop event handlers, preventDefault() skal kaldes for at tillade en dråbe, da det indikerer, at en dråbe er tilladt på det sted., Det forhindrer også, at filen åbnes, hvilket er den standardadfærd, der opstår, når du slipper en fil på en .ebside.

Hvis en dråbe kun er tilladt i visse situationer, hvor der anvendes betingelser, skal du kun tilføje preventDefault, hvis betingelserne for at tillade en dråbe er opfyldt. Dette gøres for at forhindre, at elementet er en drop zoneone, hvis betingelserne ikke er opfyldt, hvor drop ikke bør tillades.

følgende eksempel fra MDN docs viser behandling af tabte filer, hvor et trækelement, der ikke er en fil, ignoreres., 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.

---