0

Esta função está perfeita no chrome mas não funciona no firefox. o erro está que no firefox ele me retorna no console que "event is not defined" mas no chorme ta ok. As variáveis que não estão na função são globais. (não uso jquery e não quero usar)

Chamar no OnMouseDown:

function move_janela_inicia(div_barra_id)
{                                      


    <!--pega o tamanho do body principal que esta na index--> 
    elemento_body = window.parent.document.getElementById('corpo_main');

    <!--pega o retangulo do body--> 
    boxDoElemento = elemento_body.getBoundingClientRect();

    <!--pega a camada que vai se mover efetivamente, a barra filha já veio no parãmetro e assim sei quem é a pai--> 
    elemento_move=document.getElementById(window.parent.document.getElementById(div_barra_id).parentNode.id); 

    maximo_top=elemento_body.offsetHeight-elemento_move.offsetHeight;
    maximo_left=elemento_body.offsetWidth-elemento_move.offsetWidth;


    mover=1;


    document.getElementById(div_barra_id).addEventListener("mouseout", function() {

     move_janela_mouse();

      }, false);

}

Chamada na função acima

function move_janela_mouse()
{

   if (mover==1)
   {

           <!--pega o quanto rolou--> 
           var rolamentoX = elemento_body.scrollLeft;
           var rolamentoY = elemento_body.scrollTop;



           var xmouse=event.clientX;
           var ymouse=event.clientY;


           var px=((xmouse-boxDoElemento.left + rolamentoX)-(elemento_move.clientWidth/2));
           var py=ymouse-boxDoElemento.top + rolamentoY;


          <!--mantem a janela dentro dos limites-->                                           
          if (py<0) py=0;
          if (py>(maximo_top)) py=maximo_top-50;

          if (px<0) px=0;
          if (px>maximo_left) px=maximo_left;        


          elemento_move.style.left=px;
          elemento_move.style.top=py;

          mover=0;
  }



}       
4
  • Como você associa o evento a essa função? O problema está nessa parte, não no código da função em si. Ou pelo menos não só.
    – bfavaretto
    8/06/2017 às 19:17
  • Ai que ta minha dúvida, se ei coloco event como parâmetro na função, o que devo passar para este parâmetro? Um evento? Qual e por que? 8/06/2017 às 19:19
  • Depende de como você associa o evento... Tem um jeito de fazer que não precisa passar nada, a passagem é automática. É o jeito mais recomendado, com addEventListener.
    – bfavaretto
    8/06/2017 às 19:22
  • coloquei o código completo, ele está em um .js para que eu possa chamar com qualquer layer que eu queira, é só passar o div que está no papel de bara da janela e funciona perfeito no chrome, mas não no firefox. 8/06/2017 às 19:29

4 Respostas 4

2

Seu código está quase lá. Duas pequenas mudanças resolvem.

Na parte do addEventListener, passe uma referência à própria função que pretende chamar, em vez de usar uma função anônima e chamar a outra de lá:

document.getElementById(div_barra_id).addEventListener("mouseout", move_janela_mouse, false);

Esse tipo de associação de listener vai passar automaticamente um objeto de evento como primeiro argumento da função. Por isso basta mudar a primeira linha da função para:

function move_janela_mouse(event) {
    ...
4
  • Quase, por algum motivo no firefox agora quando eu clico ele some, com certeza recebeu x ou y exagerados, no chrome continua perfeito. 8/06/2017 às 19:40
  • É isso mesmo, no firefox ele está recebendo quase 300px a mais, por que será? 8/06/2017 às 19:44
  • Aí eu já não sei, tem várias coisas no seu código que eu faria diferente. Uma delas são as variáveis globais que você define implicitamente na primeira função e usa na segunda. O box do elemento, por exemplo, se ele muda conforme o momento, você precisaria recalcular. Minha resposta focou na parte da passagem do evento.
    – bfavaretto
    8/06/2017 às 19:44
  • Sim, o chato é funcionar no chorme e não no ffox, mas ok, muito obrigado parceiro, já ajudou muito,vou quebrar a cabeça e ao resolver posto aqui. 8/06/2017 às 19:46
0

você pode atribuir os valores a variável dessa maneira

var xMouse = event.clientX || event.pageX;
var yMouse = event.clientY || event.pageY;

resumindo, se o primeiro não rodar, vai com o segundo valor

0

Segue uma sugestão de melhoria para o seu código. desta forma você cria um escopo para as suas variáveis e evita chamadas desnecessárias ao evento "mouse".

var MoverJanelaInicial = function (div_barra_id) {
    // iniciando variaveis que serão utilizadas no evento.
    this.elemento = document.getElementById(div_barra_id);
    this.elemento_body = window.parent.document.getElementById('corpo_main');
    this.boxDoElemento = this.elemento_body.getBoundingClientRect();
    this.elemento_move = document.getElementById(window.parent.document.getElementById(div_barra_id).parentNode.id); 
    this.maximo_top = this.elemento_body.offsetHeight - this.elemento_move.offsetHeight;
    this.maximo_left = this.elemento_body.offsetWidth - this.elemento_move.offsetWidth;

    // no lugar de temos uma variavel "mover" controlando à chamada do evento "mouseout".
    // que tal apenas remover a associação do evento após executa-lo?
    // para tal é preciso guardar uma referencia ao evento.
    // o ".bind(this)", serve para trocar trocar o objeto de contexto do evento, desta forma o this deixa de ser o elemento DOM e passa a ser à instancia de MoverJanelaInicial
    this.onMouseOut = this.moverJanelaMouse.bind(this);
    this.elemento.addEventListener("mouseout", this.onMouseOut);
}

MoverJanelaInicial.prototype.moverJanelaMouse = function (event) {
    var rolamentoX = this.elemento_body.scrollLeft;
    var rolamentoY = this.elemento_body.scrollTop;

    var xmouse = event.clientX;
    var ymouse = event.clientY;

    var px = ((xmouse - this.boxDoElemento.left + rolamentoX) - (this.elemento_move.clientWidth / 2));
    var py = ymouse - this.boxDoElemento.top + rolamentoY;


    if (py < 0) 
        py = 0;
    if (py > (maximo_top - 50)) 
        py = (maximo_top - 50);

    if (px < 0) 
        px = 0;
    if (px > maximo_left) 
        px = maximo_left;

    this.elemento_move.style.left = px;
    this.elemento_move.style.top = py;

    // removendo evento "mouseout"
    this.elemento.removeEventListener("mouseout", this.onMouseOut);
}

// instanciando o objeto
var moverJanela = new MoverJanelaInicial("meu_id");
0

Muito obrigado pelas dicas, sem elas não teria conseguido. Várias delas não puderam ser usadas pois eu queria criar uma função que pudesse ser chamada de qualquer lugar do meu projeto, apena me referindo a ela no ondragstart, sem passar nenhum id nem me preocupar com outros eventos. A maneira abaixo funciona perfeitamente no firefox e chrome. Sem mais delongas, segue o código - é só colocar um div que seria a barra superior da janela dentro de outra div que seria a janela em si e nela colocar a chamada da função, do tipo ondragstart='move_janela_inicia(event);'

<!--variaveis globais que serão usadas em várias funções-->

 var elemento_move;
 var mover=0;
 var xinicial=0;
 var yinicial=0;



function move_janela_inicia(event)<!--chamar no ondragstart-->  
{

<!--pega a camada que vai se mover efetivamente, a barra filha já veio no parãmetro e assim sei quem é a pai--> 
    elemento_move=document.getElementById(window.parent.document.getElementById(event.target.getAttribute('id')).parentNode.id);                                       

<!--pega a posição x e y do mouse quando clicado-->     
     xinicial=event.clientX; 
     yinicial=event.clientY;


<!--passa um valor, no caso é como se passasse que valor é o id, mas podia ser um número por exemplo. Meio inútil neste exemplo mas sem esta linha não funciona no firefox-->  
     event.dataTransfer.setData("valor", event.target.getAttribute('id') );

<!--Para controlar e ele não ficar movendo sem que eu queira-->      
     mover=1;   

<!--Adiciona o evento oumouseout para que quando o usuário largue o botão chame a função-->      
     document.getElementById(event.target.getAttribute('id')).addEventListener("mouseout", move_janela_mouse, false);

}




<!--chamar no OnMouseout-->                   
function move_janela_mouse(event)
{



    if (mover==1)  <!--Se já iniciou a função move_janela_inicia e não largou o mouse...--> 
    {   


            boxDoElemento = elemento_move.getBoundingClientRect(); <!--pega a dimensão da div principa, que vai se mover--> 

            var px=xinicial-event.clientX; <!--pega aqui o quanto o usuário movimentou o mouse x e y--> 
            var py=yinicial-event.clientY;




            px=elemento_move.offsetLeft-px; <!--Desconta a largura e altura do componente--> 
            py=elemento_move.offsetTop-py;

            if (px<0) px=0; <!--as proximas 4 linhas servem para não permitir que a janela saia dos limites da página--> 
            if (py<0) py=0;

            if (px>window.screen.availWidth-elemento_move.offsetWidth) px=window.screen.availWidth-elemento_move.offsetWidth;
            if (py>(window.screen.availHeight-(elemento_move.offsetHeight*1.28))) py=window.screen.availHeight-(elemento_move.offsetHeight*1.28);  <!--por algum motivo tive que colocar 28% a mais, se puderem ajudar...--> 


            <!--agora move efetivamente a camada-->
            elemento_move.style.left=px;
            elemento_move.style.top=py;




             mover=0;  <!--para de mover as camadas-->
     }  

}       

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .