6.3 Drag-element
Detta exempel tar upp hantering av det element som dras. Innehåller det underelement, kan det vara nödvändigt att se till att inte bara underelementet dras. Det går också lägga in en egen "skuggbild" istället för den som skapas, då man börjar dra ett element. Exemplet består av två delar:
- Hanterning av drag-element, som även innehåller underelement.
- Byte av "skuggbild", för det element som dras.
12 min.
Sammanfattning
- En bild (
img-tagg) har som standard att den kan dras. Vill man förhindra det, sätter mandraggabletillfalse. Detta är nödvändigt om det element som ska kunna dras har en bild som underelement. - Vill man använda en egen "skuggbild" (kallas ibland även för "ghost image"), lägger man in en sådan med
e.dataTransfer.setDragImage()i koden som utförs viddragstart. Oftast är det ettimg-element, men det kan i princip vara vilket element som helst. - Då ett element börjar dras, utförs först koden i funktionen för
dragstart, sedan skapas skuggbilden. Gör man förändringar av elementet som börjar dras gäller de även för skuggbilden. Så döljer man elementet som dras, kommer även skuggbilden döljas. Detta sker även då man lagt in en egen skuggbild. Stilenopacitypåverkar dock endast det ursprungliga elementet och inte skuggbilden, eftersomopacitysätts för skuggbilden då den skapas. Så för att dölja det element som dras, kan man sättaopacitytill 0. Sedan kan man ändraopacitytill 1 igen i funktionen fördragend.
Egna övningar
Det finns inga specifika övningar på detta områden. Men studera koden i exemplen och experimentera med den på egen hand.