Detectar el elemento si sobre otro elemento usando CSS3 Transform

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

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

Ejemplo: – Todo el tamaño del elemento 10×10 pixeles

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

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

Mi demostración completa con el controlador del elemento 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)'); } 

Haz un recorrido en mi demo , presiona las flechas del teclado para controlar

Debe usar el 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 se superponen. Pero puedes hacer lo que quieras.

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

Además, te recomiendo almacenar la posición de los “bloques” en una array si son elementos estáticos y acceder 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'); } }); 

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