Como criar uma interface Draggable em CSS3

Às vezes, um usuário precisa reposicionar elementos da tela para torná-los mais fáceis de ver ou trabalhar. Em CSS3, criando um ambiente no qual o usuário pode mover itens não precisa envolver escrever resmas de código. Na verdade, tudo que você realmente precisa é de um único método chamado draggable ().

O código a seguir mostra o método utilizado para criar um ponto arrastável neste exemplo. (Você pode encontrar o código completo para este exemplo no Chapter pasta 06 interações do código para download como DragContent.HTML).

$ (Function () {$ ( "# MoveMe") draggable () -.}) -

Este código é interessante porque realmente cria uma função anônima jQuery que estende o ambiente jQuery em vez de trabalhar com qualquer recurso de página particular.

O foco desta chamada é um parágrafo (

tag) com um id MoveMe. Tudo que você precisa fazer é acessar esse membro e chamar draggable () para fazê-lo se mover. Experimente o exemplo para download e você achar que você pode mover o ponto onde quiser na página.

Para criar uma caixa móvel, este exemplo se baseia em um estilo personalizado. O estilo cria uma fronteira, permite muito espaço para o texto e, em seguida, centra o texto horizontalmente e verticalmente. Aqui é o estilo usado para este exemplo:

#MoveMe {Border: solid-width: 200px; height: 5em-text-align: center-line-height: 5em-}

Muitos problemas desenvolvedores experiência centrar texto verticalmente dentro de um

tag. Você pode encontrar uma série de maneiras de realizar essa tarefa. No entanto, uma das maneiras mais fáceis para começar o trabalho feito de uma maneira de plataforma e navegador consistente é usar o estilo line-height como mostrado no exemplo.

O truque, porém, é para definir os estilos de altura e line-height para o mesmo valor - o texto irá aparecer sempre no meio.