Entrar
Cadastre-se
Ajuda
Responder
Postou 25 novembro 2006 - 09:24
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 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
Quote