så här drar och släpper du HTML-element och filer med Javascript

för att definiera en droppeffekt måste följande steg följas:

5.1. Bestäm den tillåtna Dropeffekten (- erna) på det dragbara elementet i dess dragstart-händelsehanterare

med egenskapen effectAllowed på egenskapen dataTransfer-händelse definierar du alla dropeffekter som får tillämpas för det draggbara elementet.

detta görs eftersom olika släpp platser kan definieras och olika släpp effekter kan hanteras per droppe plats.,

Följande tabell definierar möjliga effektallöjade egenskapsvärden baserade på MDN-dokument:

5.2. För varje Släppplats, definiera Dropeffekten(erna) för den i dess dragover händelsehanterare

den som ska definieras dropeffekten måste vara en av de tillåtna effekterna som bestäms vid dragstart händelsehanteraren för källplatsen.,

När en droppeffekt inte är en av de tillåtna droppeffekterna kommer den att ställas in på en av de tillåtna droppeffekterna.

dragover-hanteraren, där dropeffekten ska definieras, körs när det dragna elementet dras över en möjlig släppplats.

Följande är ett exempel på att definiera droppeffekterna för en viss droppplats.

6) definiera en Släppzon (Släppplats)

som standard tillåter inget element i HTML-dokumentet en droppe., Det kan dock ändras och för att göra ett element till en droppzon måste det ha:

• händelsehanteraren för ondragover, som utförs när det dragbara elementet dras över det här elementet. I denna händelsehanterare definieras droppeffekten av droppplatsen som tidigare nämnts i steg 5.2.
• händelsehanteraren för ondrop, som är den utförda när det dragbara elementet släpps i dragplatsen / zonen.

Följande är ett exempel på att definiera ett element som en släppplats.,

i både dragover och drop händelsehanterare måste preventDefault() anropas för att tillåta en droppe eftersom det indikerar att en droppe är tillåten på den platsen.

om en droppe endast tillåts i vissa situationer där villkor används, lägg bara till preventDefault om villkoren för att tillåta en droppe är uppfyllda. Detta görs för att förhindra att elementet är en droppzon om villkoren inte är uppfyllda där droppe inte bör tillåtas.,

att avvisa en droppe baserat på typen av dragdata i egenskapen dataTransfer är ett vanligt fall. Följande exempel visar att genom att endast tillåta att länkar tas bort i dropzonelementet som har dragover-hanteraren.

7) hantera elementets droppe

under drop-händelsen bör dragdata behandlas. För att göra det används metoden getData() på egenskapen DataTransfer event.,

metoden getData() hämtar dragobjekten eftersom det krävs ett enda argument för vilken typ av data som ska hämtas och det returnerar strängvärdet som är associerat med det.

egenskaperna för allowedeffect och dropEffect hjälper till att styra den feedback som kommer att presenteras för användaren.

hantering av sådan feedback är utvecklarens ansvar och bör genomföras i händelsehanteraren för drop. Om du till exempel hämtar ett element och lägger det till en annan förälder flyttas det, men kopiering av noden resulterar i en kopieringseffekt.,

om flera dropeffekter definieras för en enda dropeffect-zon bör egenskapen dropEffect användas för att avgöra vilken draåtgärd som önskas för just den här dropeffect-händelsen.

Följande är ett exempel på hantering av en droppe.

Ibland kan du ha stött på olika typer av samma data men bara vill hämta den mest specifika typen. Följande kod från MDN dokument visar det.,

8) Använd dragend händelse för att kontrollera om Drop lyckades

i slutet av en dragoperation, en dragend händelse bränder på källelementet. Händelsen avfyrar om dragen lyckades eller avbröts.

för att kontrollera om dragåtgärden lyckades eller inte, kan värdet på dropEffect kontrolleras enligt följande:

• Om dropeffect-egenskapens värde är ”ingen” i dragend-händelsehanteraren betyder det att draoperationerna avbröts.,
• annars är värdet på egenskapen dropEffect den operation som utfördes framgångsrikt.

hmm, så hur är det användbart?

källelementet kan använda den här informationen efter en lyckad flyttoperation för att ta bort det släpade objektet från den gamla platsen.

Demo on HTML elements Drag& Drop

Obs: Du kan också klona projektet från my Github här. – herr talman!,

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) Definiera en Släppzon (Släppplats)

som standard tillåter inget element i HTML-dokumentet en droppe. Det kan dock ändras och för att göra ett element till en släppzon måste det ha:

• händelsehanteraren för ondragover, som körs när filen/filerna dras över släppplatsen.
• händelsehanteraren för ondrop, som är den som körs när filen / filerna släpps i drop-platsen.,

såsom anges av MDN docs:

dragstart och dragend händelser avfyras inte när du drar en fil i webbläsaren från operativsystemet.

Följande är ett exempel för att definiera ett element som en släppplats.

3) Hantera filens droppe

När användaren släpper filen(arna) i en släppzon utlöses en släpphändelse. Under drop-händelsen ska filen / filerna behandlas som önskat.,

för att komma åt varje tappad fil, använd händelsens dataöverföringsegenskap för att komma åt egenskapen filer. När du har åtkomst till en tappad fil, Använd File API för att bearbeta den.

om webbläsaren stöder egenskapen DataTransferItemList kan du använda den med metoden getAsFile() istället för att använda egenskapen DataTransfer för att komma åt filen.

i både dragover och drop händelsehanterare måste preventDefault () anropas för att tillåta en droppe eftersom det indikerar att en droppe är tillåten på den platsen., Det förhindrar också att filen öppnas, vilket är standardbeteendet som uppstår när du släpper en fil på en webbsida.

om en droppe endast tillåts i vissa situationer där villkor används, lägg bara till preventDefault om villkoren för att tillåta en droppe är uppfyllda. Detta görs för att förhindra att elementet är en droppzon om villkoren inte är uppfyllda där droppe inte bör tillåtas.

följande exempel, från MDN-dokument, visar behandling av tappade filer, där ett dragobjekt som inte är en fil ignoreras., 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.

---