Como criar uma interface droppable em css3
Às vezes, um usuário precisa arrastar um item para um recipiente e soltá-lo no recipiente. Há muitos exemplos deste processo CSS3 nas aplicações atuais.
Conteúdo
Video: Tutorial: Menu circular animado com CSS3 (sem javascript)
Por exemplo, o conceito de arrastar um item a uma lata de lixo e deixá-la cair para excluí-lo é consistente em todas as plataformas. Se você quiser enviar um item para a impressora, você arrastar seu ícone para o ícone da impressora e deixá-la lá.
Claro que, para criar esse efeito, é necessário ter um item que é arrastado e outro item que é droppable. Este exemplo se baseia em alguns CSS personalizado para criar um determinado na tela efeito.
#FillMe {fronteira: sólido de largura: 400 p; altura: 10em-text-align: linha de centro-altura: 10em-posição: absoluta topo-: 250 pixels; esquerda: x 250 pixels;}. {Filled cor de fundo: lightblue-}Existem dois estados para o recipiente droppable: vazias e cheias. Ele começa vazio e usa o estilo #FillMe. Quando o parágrafo draggable é deixado cair no parágrafo droppable, o estilo muda para .Filled. O código a seguir mostra como arrastar e soltar podem trabalhar juntos para criar esta interação do usuário desejável.
Video: jQUERY PART 18 Droppable, Draggable, Drop function, out, Dropbox with css programming ( jquery )
Você pode encontrar o código completo para este exemplo na pasta Capítulo 06Interactions do código para download como DropContent.HTML.
$ (Function () {$ ("#MoveMe") .draggable () - $ ("#Me preencha") .droppable ({queda: function (evento, ui) {$ (this) .addClass ("Preenchidas") .html ("Preenchidas!") -}}) -}) -Este exemplo usa o mesmo código para o MoveMe
tag. Um segundo
tag, com o ID de FillMe, atua como um recipiente. Quando um usuário arrasta MoveMe para FillMe, o código chama a função anônima associada ao evento queda.
Video: Criar site HTML/CSS a partir de layout do Photoshop (parte 1 de 2)
Observe como o exemplo começa com o nome do evento, seguido por dois pontos (:), seguido pela função anônima para lidar com esse evento. Observe como o código usa addClass () para modificar a classe de FillMe. O método droppable () oferece suporte a esses eventos:
criar: Indica que o item droppable foi criado.
ativar: Indica que um item de draggable está ativo. Você pode usar esse evento para mudar o estilo do item droppable para que o usuário pode ver onde a cair um item.
desactivar: Indica que o usuário parou de arrastar um item. Você pode usar esse evento para alterar o estilo droppable de volta ao seu estado original.
sobre: Fires quando o item arrastado é sobre a parte superior do item droppable. Você pode usar esse evento para indicar quando o usuário deve soltar o mouse para soltar o item dentro do recipiente.
out: Fires quando o item draggable se mudou para fora do recipiente item de droppable. Você pode usar esse evento para informar ao usuário que ele não é mais possível soltar um item dentro do recipiente.
gota: Indica o item soltável (o recipiente) que recebeu um produto arrastável.
Você pode criar um manipulador de eventos para qualquer um dos eventos que você deseja lidar com o seu código. Na verdade, existem várias oportunidades de efeitos especiais que focam a atenção do usuário.