¿Cómo se escucha que un elemento HTML se mueva en JavaScript?

Tengo un elemento HTML que necesito para rastrear otro elemento. Específicamente, necesito que las esquinas superior izquierda y superior derecha de ambos elementos estén posicionadas de la misma manera. Cuando se cambia el tamaño de una ventana, se activa el evento de cambio de tamaño y puedo ajustar la posición del elemento dependiente. Sin embargo, si el elemento que se rastrea se reposiciona (pero no se redimensiona), no veo ningún evento DOM.¿Cómo se escucha que un elemento HTML se mueva en JavaScript?

¿Cómo podemos saber si un elemento DOM se ha movido? Estamos usando el último jQuery.

Aquí hay un ejemplo de código.

Tenga en cuenta que elementOne y mouseTracking divs están ahí para mostrar elementos que se mueven por "algún" motivo que está fuera del control de mi código.

Este código funciona para el caso elementOne.
MouseTrackingTracker no rastrea un elemento en movimiento.
ResizerTracker no coloca el borde alrededor del texto completo en la caja de desbordamiento.

Me gustaría que el trackingDivs se mueva y cambie de tamaño sin importar el motivo de los motivos del elemento rastreado.

Este código se basa en que el tamaño de la ventana es el evento enganchado. Enganchar un evento que se dispara cuando el elemento cambia sus dimensiones está más cerca de lo que necesito.

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script> 
    <style type="text/css"> 
#elementOne { float : right;width : 200px; display:inline-block} 
#resizer { float : left; display:inline-block} 
.trackedDiv { width:50px; height:50px; background-color: blue } 
.trackingDiv { position:absolute; z-index: 1; border:3px green; border-style: solid;} 
</style> 
<script> 
    $(function() { 
     $(window).bind("resize",function(){ 
      $("#elementOne").trigger("reposition"); 
      $("#mouseTracking").trigger("reposition"); 
      $("#resizer").trigger("reposition"); 
     }); 

     var repositionFunction = function(selfish, element){ 
      var self = $(selfish); 
      var offset = self.offset(); 
      var selfTop = offset.top; 
      var selfLeft = offset.left; 

      var selfWidth = self.width(); 
      var selfHeight = self.height(); 
      $(element).css({ 
       top: selfTop, 
       left: selfLeft, 
       width : selfWidth, 
       height : selfHeight 
      }); 
     } 
     $(document).mousemove(function(ev){ 
      $("#mouseTracking").position({ 
      my: "left bottom", 
      of: ev, 
      offset: "3 -3", 
      collision: "fit" 
      }); 
     }); 

     var timedShort = function() { 
      $('#resizer').html("Really short").resize(); 
      setTimeout(timedLong, 10000); 
     } 
     var timedLong = function() { 
      $('#resizer').html("Really longggggggggggggggggggggggggggggggggggggggggggggggggggg text").resize(); 
      setTimeout(timedShort, 10000); 
     } 
     setTimeout(timedLong, 10000); 

     $("#elementOne").bind("reposition", 
       function() { repositionFunction(this, "#elementOneTracker"); }); 
     $("#mouseTracking").bind("reposition", 
       function() { repositionFunction(this, "#mouseTrackingTracker"); }); 
     $("#resizer").bind("reposition", 
       function() { repositionFunction(this, "#resizerTracker"); }); 
    }); 
    </script> 
</head> 
<body> 
    <div class="trackedDiv" id="mouseTracking">tracks mouse</div> 
    <div class="trackingDiv" id="mouseTrackingTracker"></div> 
    <div style="clear:both;"></div> 
    <div class="trackedDiv" id="resizer">resizer: resizes</div> 
    <div class="trackingDiv" id="resizerTracker"></div> 
    <div class="trackedDiv" id="elementOne">elementOne: floats to the right</div> 
    <div class="trackingDiv" id="elementOneTracker"></div> 
</body> 
</html>

Fuente

2011-08-16 Pat

¿Puedes mostrar algún código? ¿Cómo se reubica el elemento, etc.? –

ejemplo agregado. Espero que esto ayude. – Pat

posible duplicado de [Cómo saber cuándo un elemento DOM se mueve o se redimensiona] (http: // stackoverflow.com/questions/3444719/how-to-know-when-an-dom-element-moves-or-is-resized) – thSoft

No es el caso DOMAttrModified, pero su único impleneted en Firefox and Chrome. Pero como necesita una función de JavaScript para iniciar el movimiento del elemento, puede disparar un custom event with Jquery en este lugar.

Fuente

2011-08-16 07:45:34

y la documentación enumera los eventos DOMAttrModified como obsoletos :-( – Pat

Puede disparar eventos personalizados con jquery cada vez que reposiciona el elemento.

$(window).bind("resize",function(){ 

    $("#elementOne").css({ 
     top: 200, 
     left: 200 
    }).trigger("reposition"); 

}); 

// and now you can listen to a "reposition event" 

$("#elementOne").bind("reposition",function(){ 

    var self = $(this); 
    $("#elementTwo").css({ 
     top: self.css("top"), 
     left: self.css("left") 
    }); 

});

Así que se puede brindar caso engancha a sí mismo con un poco de codificación manual, que es útil ya que los eventos interesantes como DOMAttrModified y así sucesivamente, no son totalmente compatibles en todos los navegadores. La desventaja es que tienes que hacerlo todo tú mismo.

Fuente

2011-08-16 07:45:45 BGerrissen

No estoy reposicionando el elemento que estoy rastreando Probé tu solución y desafortunadamente no funciona para mis casos de uso. Mira la actualización a la pregunta original. – Pat

Desafortunadamente, no hay eventos confiables que le digan cuando un elemento se mueve o se redimensiona. Se podría recurrir a la votación el elemento, sin embargo, que no será necesariamente la solución mas potente:

setInterval(repositionElement, 10);

Otra opción es hacer que su elemento de "pista" del otro elemento puramente a través de CSS. Para que esto funcione, se necesita un "envoltorio" alrededor del elemento que se está realizando un seguimiento, y el otro elemento:

#wrapper-around-element-to-track 
{ 
    position: relative; 
} 

#tracked-element 
{ 
    position: absolute; 
    /* set top and left to position, if necessary */ 
} 

#tracking-element 
{ 
    position: absolute; 
    /* set top and left to position, if necessary */ 
}

Puesto que usted ya está usando jQuery, también se puede utilizar el resize event plugin para simular el cambiar el tamaño del evento en cualquier elemento, pero si recuerdo la última vez que lo miré, simplemente hace la encuesta como he mencionado.

Fuente

2011-08-17 00:45:46 Jacob

Llego a la triste conclusión de que estás en lo correcto. – Pat

Cualquier idea sobre cómo manejar el texto que fluye fuera del elemento (redimensionamiento cuando se muestra "texto muy largo"). Las dimensiones del redimensionamiento no incluyen el texto desbordado. Sin embargo, necesito encontrar una manera de incluir ese texto desbordado en mi borde y manejar correctamente los clics del mouse en el porción desbordada del texto. – Pat

¿Cómo se escucha que un elemento HTML se mueva en JavaScript?

Respuesta

Cuestiones relacionadas