Drag and drop - JavaScript

Drag and drop med HTML5 og JavaScript (det er ret svært så siden er ikke så god)

Introduktion

Drag and drop er desværre ikke så let at lærer som man kunne ønske sig.

Browserne understøtter det dårligt og jeg køre fast hver gang jeg prøver at lærer det.

Der kommer nok til at gå noget tid før jeg rigtigt får lært det.

Selvom man ikke har tilføjet noget JavaScript drag and drop kode på sin hjemmeside så virker drag and drop.
For eksempel hvis du marker noget tekst og hiver det over i en <input> så er det også drag and drop.
Eller hvis du hiver en fil fra skrivebordet ind i browservinduet så åbner filen i browseren.

Demo

Her er nogen skod demoer der ikke virker særlig godt. Prøv og hiv i dem.
1
2
3

Prøv og træk billedet herover
canvas element på canvas

Her er noget tekst og billede som IKKE kan trækkes.
netkoder logo
Her er noget tekst og billede som godt kan trækkes.
netkoder logo
Prøv og træk tekst og billede ovenfor ned i boksen herunder

Browsertest

Her skulle egentligt være en test men det er der ikke endnu :D.

Browserunderstøttelse af drag and drop

Browserunderstøttelse fra caniuse.com :

Kode jeg har lært indtil videre

Drag

For at kunne trækkes skal et element have draggable="true" attributten.

Så lytter man efter dragstart eventen og gemmer dataene i DataTransfer objektet.

<a>, <img> og markeret tekst kan trækkes som standard.


DataTransfer

dataTransfer objektet bruges til at holde de data som trækkes.

event.dataTransfer.setData("Text" | "Url", data); - bruges ved dragStart event.
event.dataTransfer.getData("Text" | "Url"); - bruges ved drop event. Kan også hente data fra andre vinduer og andre programmer.

event.dataTransfer.effectAllowed(none | copy | move | link | copyMove | copyLink | linkMove | all | uninitialized) - bruges ved draggable element
event.dataTransfer.dropEffect(none | copy | move | link) - bruges ved drop område.

Man kan kun droppe hvis effectAllowed og dropEffect værdierne er kompatible.

event.dataTransfer.items
event.dataTransfer.setDragImage(element, x, y)
event.dataTransfer.addElement(element)
event.dataTransfer.types
event.dataTransfer.setData(format, data)
event.dataTransfer.clearData( [ format ] )
event.dataTransfer.files


Drop

For at kunne acceptere et drop skal elementet have dropzone attributten.

Så lytter man efter drop eventen.


Dropzone

Værdien af dropzone attributten bestemmer udseendet på markøren og hvad slags data der skal kunne droppes.

Værdien af dropzone kan være "copy", "move" eller "link".
Hvis der ikke er valgt nogen af disse værdier så er "copy" valgt som standard.

copy - indikere at når man dropper en accepteret genstand her så skal det trukne kopieres
move - indikere at når man dropper en accepteret genstand her så skal det trukne flyttes til det nye sted
link - indikere at når man dropper en accepteret genstand her så vil det resultere i et link til den originale data

Derudover kan man også vælge hvad slags data der skal kunne droppes.
For eksempel dropzone="move s:text/plain" eller dropzone="move f:image/png".

move for at flytte dataene.
s:text/plain for tekst (s står for string) Plain Unicode string.
f:image/png for PNG billeder (f står for file).

I stedet for at bruge dropzone attributten kan man bruge dragenter og dragover events på drop området.

Dragenter dragover

dragenter - om droppede skal accepteres eller ej.
dragover - hvad feedback der skal vises til brugeren (markøren).

Drop event

Drop eventen skal annulleres så browserens standard handling ikke udføres.
Det vil sige hvis man ikke gjorde det ville browseren for eksempel gå til det link man dropper i stedet for at kopiere linket til der hvor man dropper det. Eller browseren ville gå til et billede man droppede.
Når man annuller drop eventen kan dropEffect attributten bruges af kilden (som ellers ville være blevet nulstillet hvis ikke man annullerede drop eventen).

Standardhandlingen annulleres med preventDefault()


Efter drop

Hvis man vil fjerne det som man har drag and droppet så kan man bruge dragend eventen.


StopPropagation()

Jeg ved ikke hvad stopPropagation() er til endnu.

Events

Her ses de events som bruges i forbindelse med drag and drop.

CSS

Når markøren holdes over firkanterne skal markørens udseende gerne ændre sig
draggable="true"
dropzone
dropzone="copy"
dropzone="move"
dropzone="link"

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.