with library images drop con and javascript jquery plugins draggable collision

javascript - library - Recomiende un complemento JQuery que maneje la detección de colisiones para elementos que se pueden arrastrar



draggable events jquery (5)

Google me dice que GameQuery, un plugin de JQuery, tiene una función de "colisión":

http://gamequery.onaluf.org/#manual

Busque la palabra "colisión" en la página anterior.

Esta búsqueda en Google puede darle un par de otras opciones:

http://www.google.com/search?q=jquery+collision+detection

Estamos utilizando el plugin JQuery UG arrastrable y no debemos permitir la superposición entre nuestros elementos. Podríamos escribir alguna detección de colisión nosotros mismos, pero preferiríamos usar un paquete probado. ¿Alguna sugerencia?


La búsqueda rápida de los complementos de jQuery aparece:

Collidable Draggables

Parece que todavía es temprano, pero valdría la pena echarle un vistazo.


Asumiendo, pero creo que lo que podrías necesitar se puede encontrar aquí:

$ .event.special.drop

Utiliza el jQuery famoso $ .event.special.drag para crear el evento drop. Puede poner su propio código de javascript en .bind( "drop", function( event ){ este elemento dentro de esta función representa el objeto con la clase "drop" que ha definido y event.dragTarget es el objeto que se está creando arrastrado

Más doc en el sitio vinculado anteriormente. Esto era lo que necesitaba de todos modos.


Sé que esta pregunta es bastante antigua, pero tal vez lo encuentres útil: nuestro complemento de verificación de colisiones para jQuery .

La descripción está en alemán, pero debería ser autoexplicativa. Puede usar dos elementos individuales o incluso conjuntos de elementos y obtendrá un conjunto de todos los elementos colisionantes.


Puedes probar jquery-collision plus jquery-ui-draggable-collision . Divulgación completa: acabo de escribir y publicar estos en sourceforge.

El primero permite esto:

var hit_list = $("#collider").collision(".obstacle");

que es la lista de todos los ".obstacle" que se superponen "#colisionador".

El segundo permite:

$("#collider").draggable( { obstacle: ".obstacle" } );

Lo que le brinda (entre otras cosas) un evento de "colisión" para vincularse a:

$("#collider").bind( "collision", function(event,ui){...} );

E incluso puedes establecer:

$("#collider").draggable( { obstacle: ".obstacle", preventCollision: true } );

para evitar que "#colisionador" se solape con cualquier ".obstáculo" mientras se arrastra.