13.1 Olika interaktion
I kommande exempel i detta kapitel ska vi se på hur Pointer events kan användas för drag-and-drop och andra pekaroperationer. Men i detta exempel repeterar vi först drag-and-drop med "HTML5-metoden", som togs upp i kapitel 6, eftersom koden sedan kommer att struktureras på ett likadant sätt. Även hanteringen av händelselyssnarna kommer sedan ske likadant. I exemplet är det också inlagt två olika sätt för interaktion med användaren, för att utföra samma operation. Användaren kan då välja det sätt som fungerar för den enhet som används och det arbetssätt som användaren föredrar.
10 min.
Sammanfattning
Drag-and-drop med "HTML5-metoden" (eller "HTML drag-and-drop API") bygger på ett antal händelser som är specificerade för drag items (de element man kan dra) och drop zones (de element man kan släppa på). Det är också mycket som sker automatiskt i webbläsaren, t.ex. att elementet följer med pekaren, då man drar. En nackdel med metoden är dock att den endast fungerar för en mus, så har man en pekskärm fungerar det inte.
I detta exempel läggs det därför in ett alternativt sätt för att utföra samma operation, där man först markerar "drag item", genom att klicka på det. Därefter klickar man på "drop zone", för att utföra operationen. Detta hanteras då endast med klick och fungerar både med mus och på en pekskärm.
Egna övningar
Inga övningar i detta exempel.