Foros del Web » Programando para Internet » Jquery »

Drag and Drop jquery

Estas en el tema de Drag and Drop jquery en el foro de Jquery en Foros del Web. Hola a todos, tengo un problema como dice el título con el drag and drop de jquery. Estoy copiando tal cual el primer ejemplo de ...
  #1 (permalink)  
Antiguo 16/01/2009, 09:56
 
Fecha de Ingreso: enero-2009
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Drag and Drop jquery

Hola a todos, tengo un problema como dice el título con el drag and drop de jquery.
Estoy copiando tal cual el primer ejemplo de esta página del sitio oficial de jquery

http://ui.jquery.com/latest/demos/functional/#ui.droppable

Código HTML:
<head>
<title>Documento </title>
<script src="jquery.js" type="text/javascript"></script>
<script src="ui.core.js" ></script>
<script src="ui.draggable.js" ></script>
<script src="ui.droppable.js" ></script>
<script language="JavaScript" type="text/javascript">
 
$(".droppable-photos-container").droppable({ 
    accept: ".img_content", 
    drop: function(ev, ui) { 
        ui.draggable.clone().fadeOut("fast", 
        function() { 
            $(this).fadeIn("fast") 
        }).appendTo($(this).empty()); 
    } 
});
 
</script>
<style type="text/css">
<!--
.droppable-photos-container {
	position:absolute;
	left:350px;
	top:172px;
	width:80px;
	height:80px;
	z-index:1;
	background-color:#0099CC;
}
.droppable-img-content {
	width:80px;
	height:80px;
}
.droppable-gallery {
	list-style: none;
}
-->
</style>
</head>
<body>
<div id="droppablePhotos" style="min-height: 130px; min-height:130px; height:auto !important;  zoom:1;"> 
 
    <ul class="droppable-gallery"> 
            <li class="droppable-img-content"> 
                <img src="objetos/imagen.JPG" alt="Tatry 1" title="Drag me!" /> 
            </li>
            <li class="droppable-img-content"> 
                <img src="objetos/imagen2.JPG" alt="Tatry 3" title="Drag me!" /> 
            </li> 
            <li class="droppable-img-content"> 
                <img src="objetos/imagen3.JPG" alt="Tatry 4" title="Drag me!" /> 
            </li> 
    </ul> 
     
    <div class="droppable-photos-container" style="text-align: center;">Drop here!</div> 
 
</div>
</body> 
Solo añado el css.

El problema es que hace el drag pero no el drop.

He probado cambiando esta line que es lo único q veo raro :

Cita:
accept: ".img_content",
por

Cita:
accept: ".droppable-img-content",
pero hace lo mismo, el drag pero no el drop.

Supongo que el error esta en lo unico que he añadido yo, pero no se, alguna sugerencia?

gracias de antemano !

las librerias para que no las tengais que buscar si no las teneis a mano están aquí

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.droppable.js"></script>

Última edición por molinos; 16/01/2009 a las 10:12
  #2 (permalink)  
Antiguo 16/01/2009, 11:15
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 18 años
Puntos: 772
Respuesta: Drag and Drop jquery

Mensaje movido al foro de Frameworks desde Javascript.

Saludos,
  #3 (permalink)  
Antiguo 16/01/2009, 16:55
 
Fecha de Ingreso: enero-2009
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Drag and Drop jquery

Bueno mirandomelo mucho, pues hasta oi no sabia nada de jquery he encontrado ya algunos fallos, y aunque mejora bastante,sigue sin ser lo que hace el ejemplo de la pagina
Código HTML:
<head>
<title>Documento </title>
<script src="jquery.js" type="text/javascript"></script>
<script src="ui.core.js" ></script>
<script src="ui.draggable.js" ></script>
<script src="ui.droppable.js" ></script>
<script language="JavaScript" type="text/javascript">
 
 $(document).ready(function(){  
   $(".img_content").draggable();  
 });  
$(".droppable-photos-container").droppable({ 
    accept: ".img_content", 
    drop: function(ev, ui) { 
        ui.draggable.clone().fadeOut("fast", 
        function() { 
            $(this).fadeIn("fast") 
        }).appendTo($(this).empty()); 
    } 
});
 
</script>
<style type="text/css">
<!--
.droppable-photos-container {
	position:absolute;
	left:350px;
	top:172px;
	width:80px;
	height:80px;
	z-index:1;
	background-color:#0099CC;
}
.droppable-img-content {
	width:80px;
	height:80px;
}
.droppable-gallery {
	list-style: none;
}
-->
</style>
</head>
<body>
<div id="droppablePhotos" style="min-height: 130px; min-height:130px; height:auto !important;  zoom:1;"> 
 
    <ul class="droppable-gallery"> 
            <li class="droppable-img-content"> 
                <img src="objetos/imagen.JPG"class="img_content" alt="Tatry 1" title="Drag me!" /> 
            </li>
            <li class="droppable-img-content"> 
                <img src="objetos/imagen2.JPG" class="img_content"alt="Tatry 3" title="Drag me!" /> 
            </li> 
            <li class="droppable-img-content"> 
                <img src="objetos/imagen3.JPG" class="img_content" alt="Tatry 4" title="Drag me!" /> 
            </li> 
    </ul> 
     
    <div class="droppable-photos-container" style="text-align: center;">Drop here!</div> 
 
</div>
</body> 

Ahora funciona el drag perfectamente y dropea, pero dropea en cualqueir sitio de la página, no en el div destinado a ello,

Alguna sugerencia?

Si al dragable le anyado esto :

Cita:
{helper: 'clone'}
sigue dragando pero no deja dropearlo en ningun sitio

tambien he probado metiendo la parte del dropable dentro de la function ready, pero sigue igual
  #4 (permalink)  
Antiguo 16/01/2009, 19:46
Avatar de marcopoloaz06  
Fecha de Ingreso: julio-2007
Ubicación: México
Mensajes: 457
Antigüedad: 12 años, 6 meses
Puntos: 11
Respuesta: Drag and Drop jquery

hola, la version 1.3 tiene algunas incompatibilidades con jQuery UI por lo que noto, asi que necesitas usar la v 1.2.6

saludos
:]
__________________
Aerolíneas Alicia :D
  #5 (permalink)  
Antiguo 19/01/2009, 16:23
 
Fecha de Ingreso: enero-2009
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Drag and Drop jquery

gracias, parece q si era eso, aunq ahora vuelvo a usar la última y también me funciona, no se si no la habrán arreglado ya.

Ahora el código de arriba funciona, lo he añadido a mi aplicación(pues lo de arriba es una provatura) y funciona pero ahora me gustaria añadirle que no sea droppable en un div que ya este ocupado y la verdad es que no se para donde tirar.
Alguna idea /sugerencia?

Última edición por molinos; 19/01/2009 a las 16:33
  #6 (permalink)  
Antiguo 22/01/2009, 15:11
 
Fecha de Ingreso: abril-2008
Mensajes: 141
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Drag and Drop jquery

mirate esto

http://www.quirksmode.org/js/dragdrop.html



Ejemplo de uso: http://rapidshare.com/files/187866633/DragDrop_Pro.html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:50.