jquery - propiedad - transform css generator

Detectar elemento si sobre otro elemento mediante el uso de CSS3 Transform

Question

¿Alguna forma fácil de detectar elementos si está sobre otro elemento?

Estoy usando la transformación CSS3 para mover un elemento. ( porque )

Ejemplo: - Todo el tamaño del elemento 10x10 píxeles

• transform : translate(170px, 180px) elemento # A transform : translate(170px, 180px) <- Este elemento puede controlar para mover
• transform : translate(200px, 200px) elemento # B transform : translate(200px, 200px)

¿Cómo detectar el elemento # A sobre algún elemento?

Mi demostración completa con el controlador de elementos jQuery: http://jsfiddle.net/ndZj5/

var over = false;
// do something with `over` to `true` to detect this...
if(!over) {
  my.css(''transform'',''translate(''+x+''px,''+y+''px)'');
}

Haga un recorrido en mi demo , presione las flechas del teclado para controlar

Answer 1

Necesita usar offset para obtener la position del objeto movido y compararlo con los "bloques".

He configurado en mi demostración los "bloques" para cambiar a azul cuando están superpuestos. Pero puedes hacer lo que quieras.

También estabas creando una sobrecarga con tu setInterval . Lo he movido al controlador de eventos de keyup .

Además, le recomiendo que almacene la posición de los "bloques" en una array si son elementos estáticos y acceda a ellos cuando sea necesario.

Ejemplo de trabajo

var objTop = my.offset().top,
    objLeft = my.offset().left,
    objWidth = my.width(),
    objHeight = my.height();            

$(''.fixed'').each(function(e){
    var self = $(this),
        selfLeft = self.offset().left,
        selfTop = self.offset().top,
        selfWidth = self.width(),
        selfHeight = self.height();

    self.css(''background'',''black'');                 

    if((objLeft + objWidth) > selfLeft && objLeft < (selfLeft + selfWidth) && (objTop + objHeight) > selfTop && objTop < (selfTop + selfHeight)){
        self.css(''background'',''blue'');
    }

});

Answer 2

Puede usar .offset para ver la posición de un elemento relativo al documento. Esto tiene en cuenta translate . Puede obtener las coordenadas del rectángulo con .offset y luego .offset.left + width / .offset.top + height . Luego puede verificar fácilmente si hay una superposición.