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.
Comentários:
<< Início
Ô Cara legal esse post! Eu tava procurando algo assim faz dias. Mas tudo que eu encontrava era complicadíssimo! Eu estava procurando algo simples e direto! Achei aqui! Valew! Já imagino que dá pra fazer muita coisa com este código!!!
Postar um comentário
<< Início
Assinar Postagens [Atom]