Hola, tengo un problema con el drag&drop, y es que saco elementos de un div, lo meto a otro, clonando el primero, pero no consigo que los elementos clonados puedan volver a moverse, se quedan justo donde los metes y no hay manera de volver a hacer drag sobre ellos.
este es el código html que estoy usando:
Código HTML:
<div class="content">
<div class ="seleccionadorleft" ">
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li><img class="arrastrable" src="capas_1024/1.png" alt="" /></li>
<li><img class="arrastrable" src="capas_1024/2.png" alt="" /></li>
<li><img class="arrastrable" src="capas_1024/3.png" alt="" /></li>
<li><img class="arrastrable" src="capas_1024/4.png" alt="" /></li>
<li><img class="arrastrable" src="capas_1024/5.png" alt="" /></li>
<li><img class="arrastrable" src="capas_1024/6.png" alt="" /></li>
<li><img class="arrastrable" src="capas_1024/7.png" alt="" /></li>
<li><img class="arrastrable" src="capas_1024/8.png" alt="" /></li>
<li><img class="arrastrable" src="capas_1024/9.png" alt="" /></li>
<li><img class="arrastrable" src="capas_1024/10.png" alt="" /></li>
</ul>
</div>
<div >
<div id="boton" class="suelta"></div>
</div>
y el javascript que uso, tiene funcionalidades para que por ejemplo no puedas meter más de 4 elementos:
Código PHP:
contador1=0;
$(".arrastrable").draggable({snap: ".suelta", snapMode:"inner"});
$(".arrastrable").draggable({helper:'clone'});
$(".arrastrable").draggable({appendTo: 'body'});
//voy a crear una variable para contar los elementos que estoy soltando
$(".suelta").data("numsoltar", 0);
//defino elementos donde se puede soltar
$("#boton").droppable({
drop: function( event, ui ) {
if( contador1<4){
if (!ui.draggable.data("soltado")){
var elem = $(this);
elem.data("numsoltar", elem.data("numsoltar") + 1);
contador1++;
$(this).append($(ui.helper).clone(true));
}
}
},
out: function( event, ui ) {
if (ui.draggable.data("soltado")){
var elem = $(this);
elem.data("numsoltar", elem.data("numsoltar") - 1);
}
}
});