2009-12-27 9 views
6

¿Hay alguna manera de hacer que los divs no se superpongan mientras se arrastra mediante jquery draggable()?¿hay alguna manera de hacer que los divs no se superpongan entre sí mientras arrastran mediante jquery que se puede arrastrar [o etc.]?

tengo un montón de divs que el usuario puede arrastrar pero no puedo tener que se superponen entre sí.

básicamente estoy creando un lienzo donde el usuario puede mover libremente los contenidos del sitio alrededor del sitio, pero no debe superponerse al otro contenido mientras los mueve. ¿algunas ideas?

+1

que utiliza son todos los elementos del mismo tamaño? Es posible que desee algo más parecido a la demostración del portlet ordenable: jqueryui.com/demos/sortable/#portlets (que en realidad son solo 3 columnas de archivos ordenables que están interconectados), –

+5

http://stackoverflow.com/questions/773717/please- recommend-a-jquery-plugin-that-handles-collision-detection-for-draggable-e – Sampson

Respuesta

0

Debe entrar en el código jquery para el efecto ui que se puede arrastrar. Debe haber una línea en el código donde el índice z del elemento se cambia a un número muy alto para que aparezca sobre todos los demás elementos. Puede eliminar esta línea y debe hacerlo para que los elementos no cambien su capa vertical al arrastrarla.

Me gustaría ejecutar un hallazgo para "z-index" en el archivo ui.

0

¿por qué no utilizar .css('z-index') o zIndex no estoy seguro. que maneja la superposición. - dé un valor de los elementos que deben estar en la parte inferior más pequeños, por ejemplo: 1 - proporcione un valor de los elementos que deben estar en el número mayor superior, por ejemplo: 3 - si necesita el elemento arrastrado para entrar entre luego darle un valor de 2.

ou puede usarlo en CSS como una clase donde el índice z controla su superposición

2

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 ".obstacle" que se superponen "#collider".

El segundo permite:

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

que le da (entre otras cosas), un evento de "colisión" de obligar a:

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

e incluso se puede configurar:

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

para evitar que "#colisionador" se solape con cualquier ".obstacle" mientras se arrastra.

+0

Intenté hacer $ (". collider"). arrastrable ({obstáculo: ".obstacle ", preventCollision: true}); tener un div que tenga ambas clases .collider y .obstacle y no se movería. Lo que trato de hacer es tener un grupo de divs que sean iguales, y eso puede ser arrastrados pero no colisionar entre ellos. – lgomezma

+0

@lgomezma - no puedes tener algo que sea a la vez un colisionador y su propio obstáculo, actualmente. Honestamente, no había pensado en esa posibilidad. ¿Puedes presentar una multa? sourceforge para los dos, y voy a tratar de hacer que una opción en el futuro? – eruciform

+0

Lo haré. Muchas gracias por la respuesta! – lgomezma

Cuestiones relacionadas