Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gustavopinent

Janelas flutuantes com html5

Por , em Desenvolvimento frontend

Recommended Posts

gustavopinent    0

gustavopinent
Postado

Olá. Estou fazendo um esquema que requer uma janela flutuante na página, tipo uma "toolbox". Decidi usar o HTML5 que dizem que é o céu dos webdesigners mas dá um efeito indesejado de janela voltando à origem antes de aparecer no local para onde eu levei com o mouse. Além disso, ele pega as coordenadas do mouse ao invés da posição atual da janela. Alguém tem uma dica? Segue o códigozinho:

 

// Parte em JS
<script language="javascript" type="text/javascript">
// Peguei só o que vai ser usado
var jGp = new Object();
jGp.traceDrag = function(e){
var objTrace = document.getElementById('jGp_trace');
var left = e.clientX;
var top = e.clientY;
//alert('Tô aqui: '+left+','+top);
objTrace.style.left = String(left)+'px';
objTrace.style.top = String(top)+'px';
}
function traceStart(){
var janTrace = document.getElementById('jGp_trace');
janTrace.addEventListener('dragleave',jGp.traceDrag,false);
}
</script>
// Estilos
<style type="text/css">
#jGp_trace {
position:fixed;
left:10px;
top:10px;
width:256px;
height:256px;
border:1px solid #000;
background-color:#FFF;
overflow:hidden;
}
#jGp_trace_cabecalho {
display:block;
width:100%;
height:16px;
background-color:#CCC;
overflow:hidden;
}
#jGp_trace_txt {
display:block;
width:100%;
height:236px;
overflow:auto;
}
</style>
// Corpo da página
<body onload="traceStart();">
<h1>Página para testar o Trace do jGp</h1>
<p>conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo </p>
<input type="button" value="Testar" onclick="jGp.trace('Botão de teste pressionado!');" />
<div id="jGp_trace" draggable="true" ><div id="jGp_trace_cabecalho">jGp T R A C E</div><div id="jGp_trace_txt"></div></div>
</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado
Decidi usar o HTML5 que dizem que é o céu dos webdesigners...

O seu problema não tem nada a ver com a versão do HTML utilizada.

 

Além disso, ele pega as coordenadas do mouse ao invés da posição atual da janela

Mas é exatamente isso o que você faz aqui:

var left = e.clientX;
var top = e.clientY;

 

Você está querendo fazer algum drag & drop? É bem mais complicado do que parece.

Se não conhece bem Javascript, recomendo não tentar.

 

Dê uma olhada aqui:

:seta: http://jqueryui.com/demos/draggable/

Compartilhar este post

Link para o post
Compartilhar em outros sites

gustavopinent    0

gustavopinent
Postado

Seus comentários não foram muito construtivos, uhn.

 

Não quero usar jQuery, senão não haveria problema. Drag e Drop tem aos montes pela web, o que não achei foi de janela flutuante. Eu peguei as coordenadas do mouse porque o da div por alguma razão não funcionou (pelo menos a janela se move). Estou justamente estudando estes detalhes em uma biblioteca JavaScript que estou montando.

 

Se é tão complicado assim estamos em maus lençóis, pois para que serve um Ajax SEM este tipo de recurso?!?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Se é só uma janela flutuante, porque fazê-la arrastável pela tela?

Para "funcionar com ajax", não precisa disso.

 

Se é tão complicado assim estamos em maus lençóis, pois para que serve um Ajax SEM este tipo de recurso?!?

Serve para muitas coisas, mas é preciso usá-lo com moderação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

gustavopinent    0

gustavopinent
Postado

Se é só uma janela flutuante, porque fazê-la arrastável pela tela?

Para "funcionar com ajax", não precisa disso.

 

 

Serve para muitas coisas, mas é preciso usá-lo com moderação.

 

Neste caso específico, é uma janela auxiliar para o desenvolvimento, lanço mensagens ali para saber o que está acontecendo - um complemento ao FireBug. Eu movimento a janelinha e posso ver todo o layout. Mas posso, por exemplo, fazer um editor de texto em Ajax e criar uma janelinha de edição de fonte / parágrafo. Até onde eu li, a propriedade "draggable" é de HTML5 e trabalhamos os eventos em JavaScript. Quando eu digo Ajax é porque ele está por trás de tudo, senão não há mesmo razão para fazer isso.

 

Tudo isso eu tenho há tempos em Flash, quero fazer em HTML5/JavaScript também, aparentemente não é tão simples.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

É, realmente não é tão trivial...

Eu tentei há muito tempo atrás e acabei desistindo...

 

Mas pra que fazer um "complemento" ao firebug? Não seria melhor utilizar o próprio console dele?

Para fazer logs, use:

console.log('Msg');
console.error('Msg');

E assim por diante...

 

De qualquer forma, veja se te ajuda:

:seta: http://html5doctor.com/native-drag-and-drop/

Compartilhar este post

Link para o post
Compartilhar em outros sites

gustavopinent    0

gustavopinent
Postado

É, realmente não é tão trivial...

Eu tentei há muito tempo atrás e acabei desistindo...

 

Mas pra que fazer um "complemento" ao firebug? Não seria melhor utilizar o próprio console dele?

Para fazer logs, use:

console.log('Msg');
console.error('Msg');

E assim por diante...

 

De qualquer forma, veja se te ajuda:

:seta: http://html5doctor.com/native-drag-and-drop/

 

A janela funciona, embora não de forma muito precisa, mas se é tão difícil assim vou jogar isso para um projeto paralelo - tentar desenvolver com tempo. Achei que com o advento do HTML5 e uma propriedade específica, as coisas ficariam mais fáceis...

 

Na realidade, a "complementação" é apenas algo muito particular que eu (ou quem usar) posso fazer, tipo abrir uma matriz, examinar algo muito específico - é como rabiscar num bloco de papel, sabe, ainda não se inventou nada que substitua.

 

Vou examinar esses recursos do Firebug. Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito