Como arrastar e capturar imagens com JQuery UI

Vamos mostrar um exemplo de como mover imagens em uma página da web e capturá-las em um div, para isso, vamos usar a interface do usuário JQuery. Nós vamos usar arrastável Y droppable. Serão utilizados os estilos mínimos, este tutorial não pretende ter um ambiente agradável para testá-lo, mas sim ver como funcionam as funções comentadas. O código não tem grandes complicações.

No exemplo teremos um par de imagens e uma div com borda, o objetivo é mover cada imagem para a div e que ela pegue, veremos os códigos começando pelo HTML.

Código HTML

Você vai perceber que o código HTML é curto, apenas o necessário, a parte importante do tutorial não se encontra aqui.

 Arrastar  

Na seção head, importamos o estilo necessário, o script que criamos e os scripts JQuery UI. No corpo, basta adicionar 2 imagens e uma div, a div tem um id, e as imagens com uma classe, para que possamos manipulá-las em nosso script.

Código CSS

Como dissemos no início, os estilos não são uma prioridade, apenas os necessários para esta tarefa serão usados.

 #frame {largura: 270px; altura mínima: 60px; margem: automático; borda: 1px totalmente preto; preenchimento: 5px; } .dropped {position: static! important; } 

Uma borda é adicionada ao div e ele é centralizado, para que possamos ver quando ele captura a imagem. A classe eliminada torna-se estática, esta parte é a mais importante, pois esta classe será adicionada à imagem quando for capturada pelo div.

Código JQuery

Vamos colocar o código abaixo, para depois explicá-lo.

 $ (document) .ready (function () {$ (". moveImage"). draggable (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (" caiu "); $ (this) .append (ui.draggable);}});})

Nós fazemos a aula mover imagem draggable, que é a classe adicionada às nossas imagens no HTML. Esta tarefa já nos permite mover ou arrastar as nossas imagens pela página, mas só isso, com aquele código ainda não seria "capturado". Para isso, usaremos droppable no div com id foto, dentro de droppable fazemos a imagem localizada no div adicionamos na classe dropp (lembre-se do CSS, sem a posição estática não funcionaria bem) e depois isso é adicionado como conteúdo do div, para isso usamos append.

Agora vamos testar o exemplo, na imagem a seguir vemos como a página começa:

Mover uma imagem ficará assim:

E, finalmente, quando tivermos as 2 imagens no div, a "página" ficará assim:

Deve-se notar que dependendo do tamanho da janela, a aparência pode variar ligeiramente. Até agora o tutorial chegou, agora você pode praticar e complicar o exemplo o quanto quiser.

ObservaçãoSe você quiser saber mais sobre o JQuery UI, visite a página deles. Você encontrará mais possibilidades e verá exemplos.