Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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><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><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>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?!?
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.
>
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.
É, 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:
>
É, 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.
O seu problema não tem nada a ver com a versão do HTML utilizada.
Mas é exatamente isso o que você faz aqui:
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/