Hvordan å lage et nedbrytbart grensesnitt i CSS3 - dummies

Noen ganger må en bruker dra et element til en beholder og slippe det i beholderen. Det er mange forekomster av denne CSS3-prosessen i nåværende applikasjoner.

For eksempel kan konseptet om å dra et element til en søppelkanne og slippe det for å slette det, være konsistent på alle plattformer. Hvis du vil sende et element til skriveren, drar du ikonet til skriverikonet og slipper det der.

Selvfølgelig, for å opprette denne effekten, må du ha ett element som er draget og et annet element som kan slettes. Dette eksemplet er avhengig av noen tilpassede CSS for å lage en bestemt effekt på skjermen.

#FillMe {border: solid; bredde: 400px; høyde: 10em; tekst-align: center; linjehøyde: 10em; posisjon: absolutt; topp: 250px; venstre: 250px;}. Fylt {bakgrunnsfarge: lightblue;}

Det er to tilstander for den dryppbare beholderen: tom og fylt. Den starter tom og bruker #FillMe-stilen. Når det trekkbare avsnittet faller inn i det nedkjørbare avsnittet, endres stilen til. Fylt. Følgende kode viser hvordan dra og slipp kan fungere sammen for å skape denne ønskelige brukerinteraksjonen.

Du finner fullstendig kode for dette eksemplet i mappen Kapittel 06Interactions av den nedlastbare koden som DropContent. HTML.

$ (funksjon () {$ ("# MoveMe"). Draggable (); $ ("# FillMe"). Droppable ({dråpe: funksjon (hendelse, ui) {$ (dette). "). html (" Filled! ");}});});

Dette eksemplet bruker samme kode for MoveMe

-taggen. En annen

-kode, med ID-en til FillMe, fungerer som en beholder. Når en bruker drar MoveMe til FillMe, kaller koden den anonyme funksjonen som er knyttet til drop-hendelsen.

Legg merke til hvordan eksemplet begynner med hendelsesnavnet, etterfulgt av et kolon (:), etterfulgt av den anonyme funksjonen for å håndtere den hendelsen. Legg merke til hvordan koden bruker addClass () for å endre klassen FillMe. Metoden droppable () støtter disse hendelsene:

• create: Indikerer at det frikopplingsobjektet har blitt opprettet.

• aktiver: Indikerer at et trekkbart element er aktivt. Du kan bruke denne hendelsen til å endre den stilbare elementstilen slik at brukeren kan se hvor du skal slippe et element.

• deaktivere: Indikerer at brukeren har sluttet å dra et element. Du kan bruke denne hendelsen til å endre den droppbare stilen tilbake til sin opprinnelige tilstand.

• over: Branner når det trekkbare elementet er over toppen av det nedtrekkbare elementet. Du kan bruke denne hendelsen til å indikere når brukeren skal slippe musen for å slippe varen i beholderen.

• ut: Brenner når det flyttbare elementet har flyttet ut av beholderen som kan slippes.Du kan bruke denne hendelsen til å fortelle brukeren at det ikke lenger er mulig å slippe en vare i beholderen.

• dråpe: Forteller det frafallbare elementet (beholderen) at den har mottatt et trekkbart element.

Du kan opprette en hendelseshåndterer for alle hendelsene du vil håndtere i koden din. Faktisk er det flere muligheter for spesielle effekter som vil fokusere brukerens oppmerksomhet.