25 Fevereiro 2006
Drag and Drop -> Mouse
O conceito de Drag and Drop é poder segurar, arrastar e soltar os componentes.
Em DHTML não é complicado fazê-lo, mas com criatividade pode-se fazer algo muito interessante e facilitar muito o usuário em ambientes de sistemas.
Vou começar com algo bem simples, captura de eventos do mouse. Talvez pra quem já mexe com isso pode parecer até meio bobo, mas acho que pode mover a imaginação de muita gente.
Para captura de eventos precisamos de coisas:
1 - O evento
2 - A função que realiza o evento
3 - Os modificados pelo evento
Com esses três componentes temos uma resposta a uma ação. Quando o evento tratado é um evento de mouse ou ainda de teclas direcionais do teclado o resultado fica muito mais interessante.
No caso 1 de captura de eventos é utilizado um m´todo que fica na elemento <body> no evento onmousemove.
Esse evento captura qualquer movimento do mouse que ocorra no elemento em que ele se encontra. Quando colocado no elemento <body>, todo movimento sobre a página irá ser capturado por esse evento, sendo assim vamos associar uma função a esse evento:
Temos agora que criar a função mover(ev1) recebendo como paramêtro uma variável que receberá o evento do mouse, por isso colocamos o nome event dentro da função no evento.
Abaixo temos duas div que serão utilizadas na animação que faremos.
Para isso é necessário configurar a propriedade position como absolute para que elas possam flutuar.
Agora vamos criar a função mover:
Simples não?! Pois é. O que foi feito foi simplesmente modificar as proprierdades dos elementos top de dv1 e left de dv2 com os valores x e y do evento. Essas propriedades contém a posiação do mouse na tela, assim temos que os elementos irão seguir a posição do mouse, como veremos no exemplo:
Exemplo 1
Nesse exemplo, foi implementada uma visualização do valor de event.x e de event.y, basta olhar o código para observar como é simples.
Pensando nisso que fizemos podemos inovar, apenas mudando a aparência dos elementos a serem exibidos. Veja o Exemplo 2.
Neste exemplo simplesmente coloquei no CSS dos elementos dv1 a propriedade width como 100% e em dv2 a propriedade height como 100%, sendo que pra não haver problemas coloquei ainda a propriedade font-size como 1px.
Qualquer dúvida enviem e-mail para mim.
Em DHTML não é complicado fazê-lo, mas com criatividade pode-se fazer algo muito interessante e facilitar muito o usuário em ambientes de sistemas.
Vou começar com algo bem simples, captura de eventos do mouse. Talvez pra quem já mexe com isso pode parecer até meio bobo, mas acho que pode mover a imaginação de muita gente.
Para captura de eventos precisamos de coisas:
1 - O evento
2 - A função que realiza o evento
3 - Os modificados pelo evento
Com esses três componentes temos uma resposta a uma ação. Quando o evento tratado é um evento de mouse ou ainda de teclas direcionais do teclado o resultado fica muito mais interessante.
No caso 1 de captura de eventos é utilizado um m´todo que fica na elemento <body> no evento onmousemove.
Esse evento captura qualquer movimento do mouse que ocorra no elemento em que ele se encontra. Quando colocado no elemento <body>, todo movimento sobre a página irá ser capturado por esse evento, sendo assim vamos associar uma função a esse evento:
<body onmousemove="mover(event)">
<div id="dv1"></div>
<div id="dv2"></div>
</body>
Temos agora que criar a função mover(ev1) recebendo como paramêtro uma variável que receberá o evento do mouse, por isso colocamos o nome event dentro da função no evento.
Abaixo temos duas div que serão utilizadas na animação que faremos.
Para isso é necessário configurar a propriedade position como absolute para que elas possam flutuar.
Agora vamos criar a função mover:
function mover(ev1){
document.getElementById("dv1").style.top = ev1.y + "px";
document.getElementById("dv2").style.left = ev1.x + "px";
}
Simples não?! Pois é. O que foi feito foi simplesmente modificar as proprierdades dos elementos top de dv1 e left de dv2 com os valores x e y do evento. Essas propriedades contém a posiação do mouse na tela, assim temos que os elementos irão seguir a posição do mouse, como veremos no exemplo:
Exemplo 1
Nesse exemplo, foi implementada uma visualização do valor de event.x e de event.y, basta olhar o código para observar como é simples.
Pensando nisso que fizemos podemos inovar, apenas mudando a aparência dos elementos a serem exibidos. Veja o Exemplo 2.
Neste exemplo simplesmente coloquei no CSS dos elementos dv1 a propriedade width como 100% e em dv2 a propriedade height como 100%, sendo que pra não haver problemas coloquei ainda a propriedade font-size como 1px.
Qualquer dúvida enviem e-mail para mim.
13 Fevereiro 2006
Dúvida sobre cargamenu.php
Respondendo a um comentário no artigo Tutorial prototype -> Ajax.Updater vou passar o conteúdo do arquivo cargamenu.php, que é simplesmente mostrar uma string com tag LI:
<?php
header("Content-type: text/html; charset=ISO-8859-1");
echo "<ul>";
switch ($_REQUEST["item"]){
case "cidade":
echo "<li>São Paulo</li>";
echo "<li>Araraquara</li>";
echo "<li>Araras</li>";
echo "<li>Ribeirão Preto</li>";
echo "<li>Campinas</li>";
echo "<li>São Carlos</li>";
echo "<li>Curitiba</li>";
echo "<li>Florianópolis</li>";
break;
case "estado":
echo "<li>Rio de Janeiro</li>";
echo "<li>Paraná</li>";
echo "<li>Mato Grosso</li>";
echo "<li>Rio Grande do Sul</li>";
echo "<li>Minas Gerais</li>";
break;
case "pessoa":
echo "<li>Pedro Eugenio Antunes</li>";
echo "<li>Paulo Salim Maluf</li>";
break;
case "outro":
echo "<li>abc</li>";
echo "<li>def</li>";
echo "<li>ghi</li>";
echo "<li>jkl</li>";
echo "<li>mno</li>";
echo "<li>pqr</li>";
echo "<li>stu</li>";
echo "<li>vxy</li>";
echo "<li>wz</li>";
echo "<li>123</li>";
echo "<li>456</li>";
echo "<li>789</li>";
echo "<li>001</li>";
echo "<li>002</li>";
echo "<li>003</li>";
echo "<li>004</li>";
echo "<li>005</li>";
echo "<li>006</li>";
echo "<li>007</li>";
echo "<li>008</li>";
break;
}
echo "</ul>";
?>
02 Fevereiro 2006
Drag and Drop
Estive ocupado e não pude atualizar o blog, mas agora vou trazer novidades
Estou preparando uma série de tutoriais para fazer Drag and Drop em DHTML.
Dentre o que vou falar está:
- Capturando objetos
- Movendo Objetos
- Z-index
- Controlando varios objetos
- Criando "Janelas" em DHTML
Existe muita coisa pronta por aí, mas tem gente, como eu, que gosta de fazer na unha essas coisas.
Aproveitando acessem meu joguinho em DHTML: Space Invaders
Estou preparando uma série de tutoriais para fazer Drag and Drop em DHTML.
Dentre o que vou falar está:
- Capturando objetos
- Movendo Objetos
- Z-index
- Controlando varios objetos
- Criando "Janelas" em DHTML
Existe muita coisa pronta por aí, mas tem gente, como eu, que gosta de fazer na unha essas coisas.
Aproveitando acessem meu joguinho em DHTML: Space Invaders
Assinar Postagens [Atom]