¿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
transform : translate(170px, 180px) <- Este elemento puede controlar para mover 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.