Home Blog Portfólio Projetos Downloads Sobre
Últimas Atualizações


Pelo Mundo
Android Police
Gizmodo
Buscar no blog por: Assinar feed

Como mover um objeto em HTML (Drag)

quarta-feira, 20 de fevereiro de 2013 Tags: Drag, Mover Objetos HTML, onDrag, onStopDrag

Nesse script vamos ver como faz para mover um objeto, seja ele uma DIV, SPAN, OBJECT, o famoso Drag, mas vamos compriender exatamente como isso acontece. A função aqui explicada vai da um abrangencia bem maior, e nos ajudar a mecher em HTML5, que será o nosso próximo passo.

Vou precisa de uma função attachEvent, fora essa o restante será criado por nós. Intaum vamos lá:
Para mover um objeto eu preciso somente dizer que ele tem o posicionamento absoluto e definir o Top(y) e o Left(x). Em outras palavras pego a cordenada do mouse é transformo em Top/Left


Criando o Objeto para guardar o local e ações do mouse
function fsdev(){
 
this.FSDEV = {
  
Mouse:{
   
'x'0,
   
'y'0
  
},
  
Drag:{
         
statusfalse,  //Saber se iniciou ou nao o Drag
         
alignfalse,   //Alinha o objeto ao centro do mouse quando clicado
         
elementnull,  //Objeto
         //As funções onDrag, onDragStop são de Eventos "ouvintes"
        
onDragStart: function(){
        },
        
onDrag: function(){
        },
        
onDragStop: function(){
        },
        
_onStart: function(e){
          
this.status true;
          
this.element e
          this
.onDrag();
          
document.onselectstart = function(){return false};
          
e.FSDEV.Drag.onDragStart();
        },
        
_onDrag: function(){
         
this.element.FSDEV.Drag.onDrag();
        },
        
_onStop: function(){
          
document.onselectstart = function(){return true};
          
this.status false;
          
this.onDragStop();
          
this.element.FSDEV.Drag.onDragStop();
          
this.element null;
        }        
  },
  
leftPos: function(ref){
   var 
valor ref.offsetLeft;
   while((
ref ref.offsetParent) != null)valor += ref.offsetLeft;
   return 
valor;
  },
  
topPos: function(ref){
   var 
valor ref.offsetTop;
   while((
ref ref.offsetParent) != null)valor += ref.offsetTop;
   return 
valor;
  }          
 }
 
//Retornamos o objeto criado. Por que criamos uma função para isso, não só um objeto, por que assim nos 
 //podemos reinstanciar um objeto, ou seja usa-lo mais de uma vez de formas diferentes
 
return this.FSDEV;
}
// Atribuindo o objeto para uma variável global
FSDEV = new fsdev();


Mapeando local do Mouse
attachEvent(document"mousemove",
 function(
ev){
  
FSDEV.Mouse['x'] = (ev.pageX) ? ev.pageX event.clientX document.body.scrollLeft;
  
FSDEV.Mouse['y'] = (ev.pageY) ? ev.pageY event.clientY document.body.scrollTop;

  if(
FSDEV.Drag.status && (element FSDEV.Drag.element)){
   
   
FSDEV.Mouse['x']-element.FSDEV.Mouse['x'];
   
FSDEV.Mouse['y']-element.FSDEV.Mouse['y'];
   
   if(
element.FSDEV.Drag.align){
    
-= FSDEV.leftPos(element.offsetParent);
    
-= FSDEV.topPos(element.offsetParent);
   }

   
element.style.top y;
   
element.style.left x;
   if(
element.style.top!=y||element.style.left!=x)FSDEV.Drag._onDrag();
  }
});


Criando a função de movitentação, o famoso Drag
function Drag(e,align){
 if(!
e.FSDEV)e.FSDEV = new fsdev(); //Recriamos o mesmo objeto dentro da Tag
 
if(align)e.FSDEV.Drag.align true;  //Adicionamos se ele vai centralizar o clicar o mouse
 
e.style.cursor 'move';    //Definimos o cursor do mouse com setinhas para todos os lados
 
e.style.position 'absolute';  //E dizemos que a posição é absoluta para então podermos mover

/*
 Ao pressionamos o botão do mouse em cima do objeto iniciamos a movimentação do mesmo
 e ao solta-lo, pararemos a ação do Drag
*/
 
 
attachEvent(e"mousedown",
  function(
ev){
   
e.FSDEV.Mouse['x'] = (e.FSDEV.Drag.align) ? e.offsetWidth/2  FSDEV.Mouse['x']-e.offsetLeft
   
e.FSDEV.Mouse['y'] = (e.FSDEV.Drag.align) ? e.offsetHeight/2  FSDEV.Mouse['y']-e.offsetTop;

   if(
e.FSDEV.Drag.align){
    
e.style.top FSDEV.Mouse['y']-e.FSDEV.Mouse['y']-FSDEV.topPos(e.offsetParent);
    
e.style.left FSDEV.Mouse['x']-e.FSDEV.Mouse['x']-FSDEV.leftPos(e.offsetParent);
   }
                                        
   
FSDEV.Drag._onStart(e);
  });
 
attachEvent(e"mouseup",
  function(){
   
FSDEV.Drag._onStop();
  });
}


Protinho já temos tudo que precisamos para mover nosso objeto(<div>, <span>). Mas e ai como funciona?! É simples
Drag(document.getElementById('exemplo1'));

Exemplo 1
<html>
 <
head>
  <
title>www.flaviosilva.net</title>
  <
script src="http://flaviosilva.net/external/scripts/flaviosilva.net.Drag.js"></script>
 </head>
 <body>
  Simples movimento de objeto
  <br>
  <div id="exemplo1" style="width:100px; height:100px; background-color: black;">
  </div>
  <script>Drag(document.getElementById('exemplo1'));</script>
 </body>
</html>


Exemplo 2
<html>
 <
head>
  <
title>www.flaviosilva.net</title>
  <
script src="http://flaviosilva.net/external/scripts/flaviosilva.net.Drag.js"></script>
 </head>
 <body>
  Centralizando o objeto em referência ao mouse<br>
  <div id="exemplo2" style="width:100px; height:100px; background-color: black;">
  </div>
  <script>Drag(document.getElementById('exemplo2'), true);</script>
 </body>
</html>


Exemplo 3
<html>
 <
head>
  <
title>www.flaviosilva.net</title>
  <
script src="http://flaviosilva.net/external/scripts/flaviosilva.net.Drag.js"></script>
 </head>
 <body>
  Pegando os eventos realizados pelo mouse<br>
  <div>
   <div id="infor">Status Mouse</div>
   <div id="posd">Posição do mouse no objeto</div>
   <div id="posm">Posição real do mouse</div>      
  </div>
  <div id="exemplo3" style="width:100px; height:100px; background-color: black; color: white;">
  </div>
  <script>
  objeto = document.getElementById('exemplo3');  
  Drag(objeto);
  
  objeto.FSDEV.Drag.onDrag = function(e){
   document.getElementById('infor').innerHTML = "Status: Pressionado";
   document.getElementById('posd').innerHTML = "Posição do mouse no objeto: "+objeto.FSDEV.Mouse['x'] + "x" + objeto.FSDEV.Mouse['y'];
   document.getElementById('posm').innerHTML = "Posição real do mouse: "+FSDEV.Mouse['x'] + "x" + FSDEV.Mouse['y']
  }
  objeto.FSDEV.Drag.onDragStart = function(){
   document.getElementById('infor').innerHTML = "Status: Clicado";
   document.getElementById('posd').innerHTML = "Posição do mouse no objeto: "+objeto.FSDEV.Mouse['x'] + "x" + objeto.FSDEV.Mouse['y'];
   document.getElementById('posm').innerHTML = "Posição real do mouse: "+FSDEV.Mouse['x'] + "x" + FSDEV.Mouse['y']
  }
  objeto.FSDEV.Drag.onDragStop = function(){
   document.getElementById('infor').innerHTML = "Status: Não clicado";
  }    
  
  </script>
 </body>
</html>


Twitter facebook Orkut