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