HTML5 træk og slip

fra HTML5 er det muligt at trække og slippe HTML-elementer inde i en HTML-side. Via JavaScript event lyttere kan du beslutte, hvad der sker, når brugeren trækker og dråber elementer.

under træk og slip kan html-elementer påtage sig to roller:

1. Trækbar
2. Drop target / drop .one.

det trækbare element er det element, som brugeren skal være i stand til at trække rundt på HTML-siden og slippe et sted, for at nogle handlinger kan forekomme. Dette kan være et eller flere elementer.,

drop-målet eller drop-zoneonen er det element, hvorpå de trækbare elementer tabes.

træk og slip begivenheder

for at kontrollere, hvad der sker, når du trækker og slipper HTML-elementer, skal du udføre 3 trin:

1. Indstil HTML-elementerne til trækbare.,
2. Vedhæft hvis lytterne til at den kan trækkes rundt HTML-elementer
3. Vedhæft hvis lytterne til at drop mål HTML-elementer

De begivenheder og attributter er vist her:

Først skal du indstille draggable="true" attribut på HTML-element(s) for at gøre trækkes rundt.

for det Andet, du lægger hvis lytterne om trækkes element for dragstart og dragend begivenheder., Inde i disse begivenhedslyttere kan du implementere, hvad der skal ske, når brugeren begynder at trække elementet, og når trækningen slutter.

for det tredje vedhæfter du begivenhedslyttere på drop target-elementet. De begivenheder, som du kan lytte til er dragenter dragover dragleave og drop.

dragenter begivenhed er fyret, når brugeren trækker trækbar på drop-målet., Denne begivenhed udløses kun, når det trækbare element skifter fra at være udenfor til at være over, hvilket typisk bestemmes af musemarkørens position.

når det trækbare element er over drop-målet, skyder dragover begivenheden, og fortsætter med at skyde, så længe det trækbare element trækkes over drop-målet.

Hvis brugeren trækker det trækbare objekt ud af drop-målet igen, affyres dragleave begivenheden.

Hvis brugeren taber det trækbare objekt på drop-målet, affyres drop begivenheden.,træk og slip Hændelseseksempel

Her er et eksempel, du kan spille med. Prøv at trække HTML5-logoet på drop-målet og se, hvad der sker. Prøv både at droppe billedet og trække det ud igen.

Træk og Slip-Kode

Lad os tage et kig på hvordan til at håndtere træk og slip begivenheder., For at se, at vi først opretter et<img> element, som vi kan trække. Her er HTML-koden for det:

<img src="http://tutorials.jenkov.com/html5/..." draggable="true">

Når vi har et trækbart element, har vi brug for et drop-mål. Jeg vil bruge et <div> element:

<div style="width: 200px; height: 200px;">Drop here</div>

Når vi har det trækbare element og drop target-elementet, skal vi vedhæfte begivenhedslytterne., Her er JavaScript-koden for det:

dragStart()funktionskald event.dataTransfer.setData() for at indstille de data, der overføres til drop-målet, når elementet tabes. Uanset hvilke data du har brug for for at afslutte drop-handlingen korrekt, skal du indstille den her. Du indstiller både data og dens mime-type.

dragOver() og drop() event-handlere både call event.preventDefault() og return false. Dette er nødvendigt for at få træk og slip til at fungere korrekt., Bro .seren kan have nogle standard træk og slip adfærd, som du skal deaktivere for at gøre din kode arbejde.

Bemærk også, at drop()hændelseshåndtererfunktionen læser datasættet i dragStart()via opkaldet til event.dataTransfer.getData(). Det passerer mime type data som parameter til korrekt udtrække det.

Dette er alt, hvad der er nødvendigt for at implementere træk og slip i HTML5. Du kan dog gøre det lidt mere visuelt behageligt, som vi vil se i næste afsnit.,

visuel Feedback

Du kan bruge træk og slip hændelseshåndterings-funktionerne til at give brugeren mere eksplicit visuel feedback.

først og fremmest kan du markere det element, der trækkes, så brugeren kan se, hvilket element han eller hun trækker. Hvis flere elementer ser ens ud, og de alle kan trækkes, er det rart for brugeren at se, hvilken der trækkes. Du kan gøre det som svar pådragstart begivenhed. Her er et eksempel:

Når træk slutter, vil vi dog fjerne grænsen igen., Dette gøres som svar på dragend begivenhed. Sådan gøres det:

nu får brugeren visuel feedback, der viser, hvilket element der trækkes.

vi vil også vise brugeren, at det er muligt at droppe det trækbare element, når det trækkes over drop-målet. Igen vil vi ændre elementets grænse. Vi vil gøre det som svar pådragenter,dragleave ogdrop begivenheder., Sådan gøres det:

nu bliver grænsen for drop-målet grøn og stiplet, når det trækbare element trækkes over det. Grænsen fjernes, når det trækbare element trækkes ud igen, eller hvis elementet tabes på drop-målet.

eksemplet ovenfor viste ikkedragOver() hændelseshåndteringsfunktion, men sørg for at tilføje den for at forhindre standardbro .seradfærd.,

Her er den fulde kode efter den visuelle feedback er blevet tilføjet:

DataTransfer Objekt, effectsAllowed, dropEffect og setDragImage()

Du kan øge den visuelle feedback til brugeren i løbet af træk og slip-handlinger ved brug af DataTransfer objektet. Objektet DataTransfer har 2 attributter og en funktion, du kan bruge til dette formål., Disse er:

• effectsAllowed
• dropEffect
• setDragImage()

– Du har adgang til DataTransfer objekt i dragstart og drop event objekter. Her er et eksempel dragstart lytteren funktion, som indstiller effectsAllowed ejendom på DataTransfer objekt:

effectsAllowed ejendommen anvendes af browsere ændre musemarkøren til at vise, hvad slags handling der skal udføres, når at trække og slippe et element., Typisk ændres musemarkøren, når det trækkede element er over et drop-mål. Ikke før. Gyldige værdier for effectsAllowed ejendommen er:

• ingen
• kopiér
• flyt
• copyMove
• link
• linkMove
• copyLink
• alle
• ikke-initialiseret

dropEffect er meningen at vise brugeren (via markøren) hvad sker der, når musen svæver over en dråbe mål, men i skrivende stund (februar. 2014) bro .serne ser ud til at ignorere dette., Gyldige værdier for dropEffect ejendommen er:

• ingen
• kopiér
• link
• flyt

setDragImage(image, x, y) funktion kan bruges til at sætte det billede, der vises af browseren, når den bruger trækker et element. Som standard viser bro .seren en halvgennemsigtig kopi af det originale element, men hvis du vil have et andet billede, kan du indstille et andet billede ved hjælp af denne funktion. x og y egenskaber kan bruges til at indstille placeringsforskydninger for billedet, når det vises., Som standard er det øverste venstre hjørne af trækbilledet placeret på spidsen af musemarkøren. Ved at indstille forskellige x og y egenskaber kan du ændre dette. Du kan bruge enten positiv eller negativ x og y forskydninger.

Her er et eksempel på kode, der viser, hvordan du indstiller et træk billede inde i en dragStart() event listener funktion:

Her er et eksempel, der lader dig spille med de forskellige indstillinger på DataTransfer objektet., Prøv at ændre effectsAllowed og træk billedet og se hvad der sker, når du trækker HTML5-logo ned over div drop mål.

at Trække Filer Ind i Den Browser

Det er muligt at trække filer i browseren fra filsystemet og læser navnet og indholdet af de slæbte filer fra JavaScript. Det gør du via HTML5 File API., Her er en drop target-lytter, der registrerer filnavnet på den trækkede fil:

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.