2010-07-26 6 views
6

tengo un div habitación con algunos divs juguete dispuestos en ella, ver alt text http://i27.tinypic.com/2rwt4t5.jpgManejo de barras de desplazamiento con jQuery evento de arrastrar y soltar

juguetes están posicionados absolutamente y son capaces de arrastrar con en las paredes de la habitación. El div contenedor de sala tiene una altura y altura fijas, por lo que la sala tiene pergaminos horizontales y verticales. Uso el complemento jquery event drag para configurar DnD. Me las arreglé para configurar los juguetes solo con los lomitos de la pared, pero cuando hay pergaminos, el componente se mueve un poco fuera de la pared (solo hasta el ancho real de la pared).

quiero mostrar sólo una parte del juguete, como se muestra a continuación alt text http://i30.tinypic.com/jac19i.jpg

Intenté fijar el z-index, pero no tiene efecto, cualquiera tiene una mejor idea?

+0

Tienes algo, absolutamente necesario que la posición del robot div habitación y la habitación contenedor div –

Respuesta

2

Sin ver el código real, supongo desbordamiento: oculto podría resolver esto?

+0

'desbordamiento: hidden' no tiene ningún efecto como el' toy' divs tengan una posición absoluta. –

+0

ver mi respuesta arriba, desbordamiento: oculto * debería * ser la solución – michael

1

el ejemplo a continuación muestra que overflow: hidden hace de hecho lo que está pidiendo. ¡Algo está pasando con su código, pero no podemos ayudarlo a menos que lo publique!

alt text http://img155.imageshack.us/img155/9594/example1281542227415.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Example</title> 

     <style type="text/css"> 

      #container { 
       background-color:#ddddff; 
       height:300px; 
       overflow:hidden; 
       position:relative; 
       width:300px; 
      } 

      #container .child { 
       background-color:#ddffdd; 
       height:50px; 
       position:absolute; 
       width:50px; 
      } 

      #container .child1 { 
       left:100px; 
       top:70px; 
      } 

      #container .child2 { 
       left:270px; 
       top:170px; 
      } 

     </style> 
    </head> 

    <body> 

     <div id="container"> 
      <div class="child child1"></div> 
      <div class="child child2"></div> 
     </div> 

    </body> 
</html> 
Cuestiones relacionadas