Webly

Internet + Humana

Ir para o Conteúdo
Ir para o Menu
Ir para a Busca
Ir para o Login

Assine:

Navegação

Drag Layer

Drag layer

Escrito por Lucasbr em HTML e Editores Visuais. Data: 25/11/2006

Ver tópico original no fórum.

Com essa ação nós editamos Camadas, realizando ótimos efeitos. Por Exemplo: - possibilita arrastar camadas para qualquer lugar da tela, alterar a ordem de empilhamento das camadas etc .... Antes da ação DragLayer estar disponível na lista drop-down para seleção em Add + , uma ou mais camadas devem estar presente na página.

Usando a ação DragLayer:

1). tenha uma ou mais camadas na página e selecione em Tag Selector <body> ;
2). no painel Behaviors , selecione Add (+) e escolha draglayer ;

Drag Layer

3). na guia Basic:
em Layer selecione a camada que você quer tornar arrastável
em Movement você determina o tipo de movimento da camada selecionada : Unconstrained (não tem limite o movimento) Constrained (você limta o movimento para cima Up , para baixo Down , para a esquerda Left e para a direita Right). Exemplo: clique aqui e observe a camada amarela: arraste-a e perceba que ela não tem limite de movimento (Unconstrained) , já repita o mesmo procedimento para a camada azul e note que ela só se movimenta 30 pixels para cima, para baixo, para esquerda e para direita (Cosntrained Up 30 , Down 30 , Left 30 , Right 30).
Na Caixa DropTarget e Snap if Within você determina uma localização para um alvo para a camada, Left (distância em pixel a esquerda da página) e Top (distância em pixel do topo da página). Clicando em Get Current Position você obtém a posição atual da camada selecionada, (serve como referência de posição). Veja um exemplo clicando aqui. Clique sobre a camada amarela que ela tem como alvo: Left=200 Top=0 e Snap if Within=300 com a ação OnClick.

4). na guia Advanced:

em Drag Handle: Entire Layer - você determina que toda camada é uma alça de arraste, isto é , você arrasta a camada clicando em qualquer lugar dela. Escolhendo a opção: Area Within Layer - você determina a area que será a alça arrastável da camada L(eft) , T(op) , W(idth) e H(eight). Em While Dragging você controla o posicionamento da camada arrastada. Desmarcando a opção Bring Layer to Front, then você mantêm a camada com sua profundidade atual. Marcando essa opção, você escolhe a posição de empilhamento: Leave on Top (sempre por cima) ou Restore Z-index (escolhe a profundidade da camada). Em Call JavaScript - você insere um comando Java Script que é executado enquanto a camada é arrastada. Já em When Dropped; Call JavaScript - o comando JavaScript é executado somente quando a camada é colocada no alvo.

Esse Behavior é muito usado por Designers Web e vocês acabaram de ver como é fácil configurá-la com nosso DW. Lembrando que você pode inserir o que quiser em uma Layer (Camada).

Marcelo Ramos

Você gostou? Comente no fórum!