Javascript: Draggable Window

Ver post no novo domínio: http://rogeriolino.com/2007/01/25/javascript-draggable-window/

Tem algum tempo já que estava de bobeira e acabei fazendo um exemplo de uma div (janela) arrastável.

Simulei uma janela padrão em alguns Sistemas Operacionais, tem a barra superior com o título da janela, o espaço ao centro para o conteúdo e uma barra no final, a statusbar (essa só para incrementar mesmo).

Há nela também três opções: “minimizar/maximizar“, “esconder” e “fechar“.

Na opção “minimizar” é alterado a propriedade display do CSS da parte do conteúdo para none. Voltando para block com “maximizar”.

O “esconder” além de aproveitar a função para “minimizar” também altera o display da statusbar para none. E seta a posição da janela para a origem da tela (left:0 e top: 0).

E o “fechar” por sua vez altera a propriedade do visibility do CSS da janela toda para hidden. E no palco tem uma opção para (re)abrir a janela, que altera o visibility para visible.

O porquê de usar visibility para “fechar” a janela é porque não queremos mudar o comportamento da janela, como ela é vista, e sim só sumir, torná-la invisível. O mesmo não funcionaria muito bem com o conteúdo porque fazendo ele só sumir ainda ficaria o seu “espaço guardado” fazendo apenas o conteúdo ficar invisível ao invéz da janela realmente minimizar.

Ao arrastar a janela também é alterado o cursor, mudando para move. O que caracteriza melhor a janela sendo arrastada.

Qualquer dúvida é só deixar no comentário.

Exemplo: Draggable Window

Source: Draggable Window

19 thoughts on “Javascript: Draggable Window

  1. Thiago

    Fala eu estava desenvolvendo um script como esse.
    Muito legal o seu codigo, tem algum problema se eu o utilizar em um Framework de Ajax que eu estou fazendo ?!??!

    até mais,
    Thiago

    Responder
  2. Daniel

    Olá, parabéns muito bom script, ja uso outra classe para isso, mas o seu script ficou muito bom, muito limpo e crossbrowser..Parabéns!
    …mas tenho um dúvida com relação ao teu exemplo, como tu linkou o css q eu nao vi?…hehe…fiquei intrigado por nao ver o link.
    No mais um abraço! (ja está no meu favoritos!).

    Responder
  3. Rogério Alencar Lino Filho Post author

    Fiz pelo próprio script, para facilitar mais. Tendo que linkar direto na página apenas o Javascript.

    Abaixo a parte que cria um objeto link e adiciona na página:

    //addStyle
    var style = document.createElement(“link”);
    style.setAttribute(“rel”, “stylesheet”);
    style.setAttribute(“type”, “text/css”);
    style.setAttribute(“href”, “script/style.css”);
    document.getElementsByTagName(“head”).item(0).appendChild(style);

    Obrigado pelas palavras,

    vlw!!!

    Responder
  4. Vagner

    Cara muito bom esse script, gostaria de saber se alguem tem um javascript que além de arrastar redefine o espaço na página, principalmente quando se tem várias janelinhas abertas, assim arrasto e não sobrepoe outras, como no pageflakes.com

    grande abraço

    Responder
  5. Paulo Reis

    Olá, tudo bem? Eu estou com dificuldade em construir o css de modo a ficar com o estilo exemplificado no site(que eu gosto muito), se possivel, e agradeço muito, pode-me enviar o css por mail? Muito Obrigado.

    Responder
  6. jheison

    cara ficou de mais esse seu script so que se possivel tu enviasse para mim o css pois nao vem e dai nao consegui rodar o exemplo aqui pois eu ainda sou novo nesse negocio e tenho dificuldade de criar css

    vlw

    Responder
  7. Marcelo Leonardo

    Boa Tarde.

    Muito legal seu código. Gostaria se você não disponibiliza por e-mail ou se tem outro lugar para baixar. Tentei olhar o conteudo mas não consegui fazer funcionar. Essa janela flutuante e tudo que eu preciso para meu site.

    Obrigado

    Responder
    1. ronilson

      cara adorei mas só aparece a imagem e as letras não fica flutuando como mostrado na pagina se puder me ajuda ficaria muito grato … e não pude deixar os meus sincero elogios pelo seu trabalho se puder postar aqui assim tiraria varias duvidas eu acho

      Responder
  8. Fabio

    Rogerio,

    Funcionalidade muito legal a que você construiu. Gostaria de saber se você permite a utilização deste código.

    Abraço,
    Fabio

    Responder
  9. Andre

    Excelente código porém, eu apliquei no meu servidor local para ver como ficaria e na página que mandei exibir a div as imagens ali existentes ficaram com uma borda cinza e um pouco distorcidas. O que pode ser isso ? Desde ja grato pela ajuda.

    Att,
    André Fabiano

    Responder
  10. Antônio Carlos

    Valeu,

    Estava precisando justamente de uma janela que não afetasse o formulario principal. Esse script caiu como uma luva.

    Parabens pela iniciativa.

    att.
    Antônio Carlos.

    Responder
  11. Hikari

    Nossa cara adorei essa window q vc fez😀

    Vô pegar seu código como base e fazer um pra mim, de forma a suportar multiplas windows e encapsulando a window numa classe!

    Responder

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s