no puedo arrastrar elementos clonados

[CesarIrnan]

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);
            }
        }
     }); 
   

[CesarIrnan]

si cambio:

$(this).append($(ui.helper).clone(true));

por:

$(this).append($(ui.helper).clone(true).attr("id", contador1).draggable());

consigo que se muevan los elementos pero tambien se clonan

[CesarIrnan]

Otra cosa, como puedo acceder a los atributos del objeto clonado?

puesto que el $(this) hace referencia al #boton, supongo que si cambio la clase del objeto y a esa clase solo le doy opciones de arrastra pues no clona...

[CesarIrnan]

por si a alguien le interesa he solucionado el problema.... solo me queda un tema y es que el elemeto que arrastro a otro div, lo incluya....

Código PHP:

  if ($(ui.draggable).hasClass("arrastrable")){
    var elem = $(this);
    elem.data("numsoltar", elem.data("numsoltar") + 1);
    contador++;
    $(this).append($(ui.helper).clone(true).removeClass("arrastrable ui-draggable ui-draggable-dragging").addClass("arrastra ui-draggable").attr("id",contador).draggable({snap: ".suelta", snapMode:"inner"}));
}else{
}