Draggable y overflow:auto(jQuery)

kceres · #1 (**permalink**) 24/03/2010, 08:03

hola amigos, tengo un pequenno porblema con una aplicacion web que estoy desarrollando y es el siguiente:

tengo un div de un tamanno fijo, pero con la propiedad css de overflow:auto, para que todo lo que no quepa en el tamanno definido, pues se esconda y saque el scroll, pero tambien necesito que estos elementos que estan dentro sean draggable(con jQuery), todo perfecto hasta ahi, pero cuando quiero sacar algun elemento que esta dentro del div con overflow mediante draggable para ponerlo en orto lugar, pues no me deja y lo que haces es agrandar el scroll....a la verdad es que ya no se que hacer, si alguien tiene una idea del porque de esto se los agradeceria....gracias de antemano.

saludos, kceres

juaniquillo · #2 (**permalink**) 24/03/2010, 08:31

Me imagino que el draggable necesita dale estilos al contenedor también. ¿Has intentado poner un contenedor fuera y a ese darle el tamaño fijo y overflow: auto?

kceres · #3 (**permalink**) 24/03/2010, 08:50

mi problema seria algo mas o menos asi:

Código HTML:

<div id="contenedor1" style="overflow:auto; width:300px; height:300px">
  <div id="ColumnaA">
    <div id="Element_1">contenido 1 para draggable</div>
    <div id="Element_2">contenido 2 para draggable</div>
    <div id="Element_3">contenido 3 para draggable</div>
    <div id="Element_4">contenido 4 para draggable</div>
  </div>
</div>
<div id="contenedor2" style="overflow:auto; width:300px; height:300px">
  <div id="ColumnaB">
  </div>
</div>

cuando intento arrastrar cualquier elemento_# de la columnaA hacia la columnaB, pues lo que me hace es agrandar el scroll que hay en el contenedor1....si le quito el scroll(quito el overflow), todo sale perfecto, sin ningun problema.

gracias por el interés mostrado.

saludos, kceres

mayid · #4 (**permalink**) 24/03/2010, 09:28

Y el draggable es el de jquery UI, no? Podes publicar la parte de jquery que hace que los divs se conviertan en draggables? Y como asignas droppables?

kceres · #5 (**permalink**) 24/03/2010, 09:42

Este es aproximadamente el codigo que tengo, no lo pongo completo porque es muy grande, pero es esta misma idea...estoy usando la UI de jQuery

Código HTML:

<div id="contenedor1" style="overflow:auto; width:300px; height:300px">
  <div id="ColumnaA">
    <div id="Element_1" class="ColumnaA_element">contenido 1 para draggable</div>
    <div id="Element_2" class="ColumnaA_element">contenido 2 para draggable</div>
    <div id="Element_3" class="ColumnaA_element">contenido 3 para draggable</div>
    <div id="Element_4" class="ColumnaA_element">contenido 4 para draggable</div>
  </div>
</div>
<div id="contenedor2" style="overflow:auto; width:300px; height:300px">
  <div id="ColumnaB">
  </div>
</div>

Código:

        $('.ColumnaA_element').draggable({
            revert:'invalid',
            helper: 'clone'
        });

        $('#ColumnaB').droppable({
            accept:'.ColumnaA_element',
            tolerance: 'pointer',
            drop:function(event, ui){
                $('#ColumnaB').append(ui.draggable);
            }
        });

Gracias.

kceres · #6 (**permalink**) 26/03/2010, 07:23

Amigos, pongo a continuacion un codigo que tiene el mismo problema del que les comente arriba....espero de su ayuda y compresion...gracias desde ya.

saludos, kceres.

Código HTML:

<html>
	<head>
		<title>Pagina de Prueba</title>
		<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="js/ui.core.js"></script>
		<script type="text/javascript" src="js/ui.draggable.js"></script>
		<!--<script type="text/javascript" src="js/ui.droppable.js"></script>-->

		<style type="text/css">
			#contenedor_1{
				width:300px; height:300px; border:1px solid #DDD; padding:5px; overflow:auto;
			}
			#contenedor_2{
			}
			.ul_li{
				border:1px solid #000; padding:5px; margin-top:3px;
			}
			ul{
				list-style-type: none;
			}
		</style>
	</head>
	<body>
		<div id="contenedor_1">
			<div id="contenedor_2">Enunciado del esta columna, bla, bla, bla</div>
			<div id="contenedor_3">
				<ul id="ul_1">
					<li class="ul_li">Opcion #01</li>
					<li class="ul_li">Opcion #02</li>
					<li class="ul_li">Opcion #03</li>
					<li class="ul_li">Opcion #04</li>
					<li class="ul_li">Opcion #05</li>
					<li class="ul_li">Opcion #06</li>
					<li class="ul_li">Opcion #07</li>
					<li class="ul_li">Opcion #08</li>
					<li class="ul_li">Opcion #09</li>
					<li class="ul_li">Opcion #10</li>
					<li class="ul_li">Opcion #11</li>
					<li class="ul_li">Opcion #12</li>
					<li class="ul_li">Opcion #13</li>
					<li class="ul_li">Opcion #14</li>
					<li class="ul_li">Opcion #15</li>
					<li class="ul_li">Opcion #16</li>
					<li class="ul_li">Opcion #17</li>
					<li class="ul_li">Opcion #18</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			$(".ul_li").draggable();
		});
	</script>
</html>

mayid · #7 (**permalink**) 26/03/2010, 10:44

Fijate si tu problema es el mismo que tiene el de la pagina de esta demo:
http://jqueryui.com/demos/sortable/

Creo que es el comportamiento por defecto. Lo que necesitas es connect with:
http://jqueryui.com/demos/sortable/#connect-lists