Janelas flutuantes com html5
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>Discussão (6)
Carregando comentários...