Drag and Drop jquery

molinos · #1 (**permalink**) 16/01/2009, 09:56

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>

JavierB · #2 (**permalink**) 16/01/2009, 11:15

Mensaje movido al foro de Frameworks desde Javascript.

Saludos,

molinos · #3 (**permalink**) 16/01/2009, 16:55

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

marcopoloaz06 · #4 (**permalink**) 16/01/2009, 19:46

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
:]

molinos · #5 (**permalink**) 19/01/2009, 16:23

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?

GagleKas · #6 (**permalink**) 22/01/2009, 15:11

mirate esto

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

Ejemplo de uso: http://rapidshare.com/files/187866633/DragDrop_Pro.html