Como criar uma interface de droppable em CSS3

Às vezes, um usuário precisa arrastar um item para um recipiente e deixá-la no recipiente. Há muitos exemplos deste processo CSS3 nas aplicações atuais.

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 efeito na tela.

#FillMe {Border: solid-width: 400px; height: 10em-text-align: center-line-height: 10em-position: absolute-top: 250px; left: 250px;}. Cheio {background-color: 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.

Você pode encontrar o código completo para este exemplo no Chapter pasta 06 interações do código para download como DropContent.HTML.

$ (Function () {$ ( "# MoveMe") draggable () - $ ( "# FillMe") droppable ({queda:.. Função (evento, ui) {$ (this) .addClass ( "cheios"). html ( "Cheio!") -}}) -}) -

Este exemplo utiliza 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.

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 mudar 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: Diz o item droppable (recipiente) que recebeu um item de 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 concentre a atenção do usuário.

Semelhante

menu