Como fazer uma DIV arrastável com JQuery

Escrito por kevin lee | Traduzido por francisco de castro
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer uma DIV arrastável com JQuery
Impressione os visitantes do site com o uso extraordinário dos efeitos do JQuery (George Doyle/Stockbyte/Getty Images)

A JQuery, uma biblioteca JavaScript, inclui abaixo do logotipo na sua homepage, a frase: "Escreva menos, faça mais". Os desenvolvedores web escrevem menos códigos JavaScript usando JQuery, porque suas bibliotecas lidam com tarefas complexas que, normalmente, requerem uma codificação extensa. Mover um bloco DIV HTML ao redor de uma página web, por exemplo, não é uma tarefa simples. Usando o JQuery, é possível adicionar uma linha à função JavaScript e transformar qualquer DIV da página em um componente arrastável.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

    Instruções

  1. 1

    Inicie o editor HTML ou um editor de texto. Abra um documento HTML e cole o seguinte código JavaScript dentro da seção "head" (cabeçalho) do arquivo:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script> <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript">

    Este código, hospedado pela Google, torna disponível, para o documento HTML, os componentes necessários do JQuery.

  2. 2

    Adicione a seguinte DIV à seção "body" (corpo) do documento:

    <div id="div1"> <h1>Isto é um cabeçalho na DIV. Clique e arraste para movê-lo</h1> </div>

    Esta DIV, cujo id é "div1", contém um cabeçalho.

  3. 3

    Cole o seguinte código JavaScript na seção "script", dentro da seção "head" do documento:

    <script language="javascript" type="text/javascript">

    $(function() { $( "#div1" ).draggable(); });

    </script>

    Esta função acontece quando a página é carregada. Ela contém uma linha de código que habilita o plugin JQuery Draggable e este torna possível arrastar objetos na página web. Observe o nome "div1" no começo da declaração. Este é o id da DIV criada no Passo 2.

  4. 4

    Salve o documento e abra-o em um navegador de internet. O cabeçalho dentro da DIV aparecerá. Clique e arraste para qualquer local da página web.

Dicas & Advertências

  • Para criar qualquer DIV arrastável, atribua um valor único ao id e utilize-o na função JavaScript, como mostrado nos passos das instruções. Este exemplo usa um elemento de parágrafo dentro da DIV. Qualquer elemento pode ser colocado dentro dela. Adicione uma imagem ou mesmo um vídeo, por exemplo, e os visitantes do site serão capazes de reposicionar os elementos clicando e arrastando.
  • Embora tenha apenas adicionado uma declaração para a função JavaScript, esta utiliza vários arquivos JavaScript para produzir este efeito. O Google hospeda estes arquivos JQuery sem nenhum custo. Criar um link para eles em vez de mantê-los no servidor, torna possível ter o código JQuery mais atualizado sempre disponível. Os navegadores web também armazenam em cache estes arquivos. Isto faz com que as páginas abram mais rapidamente, se os visitantes do site já tiverem cópias dos arquivos JQuery salvos nos seus navegadores.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível