pestañas - jQuery UI-clon de ayudante arrastrable

pestañas jquery ui

Question

¡Gracias de antemano por echar un vistazo a esto!

Mi meta:

• Al arrastrar y soltar un objeto al lienzo de arte, un original (o copia) del objeto debe permanecer en la "Barra de herramientas" en la parte superior para que el usuario pueda usarlo repetidamente.

• Una vez que el objeto arrastrado se coloca en el lienzo de arte, necesito que se mantenga arrastrable por todo el lienzo si el usuario decide que quiere moverlo

Que esta pasando:

• (completo) El objeto se está clonando como se esperaba y se dejó caer sobre el lienzo
• El objeto ya no se puede arrastrar a lo largo del lienzo una vez que se suelta. Intento descubrir cómo mantenerlo arrastrable una vez que se cae.

La opción clonar fue la única forma en que pude crear una nueva instancia del objeto arrastrable, tal vez estoy pensando en la dirección incorrecta.

Estoy creando un clon como tal:

$(".objectDrag").draggable({
    helper:''clone''
});  

$("#artCanvas").droppable({
    accept: ".objectDrag",
    drop: function(event,ui){
        var new_smiley = $(ui.helper).clone();
        $(this).append(new_smiley );
    }
});

Aquí hay un JSFiddle para una visión de lo que está ocurriendo: http://jsfiddle.net/YRfVd/55/

Por favor, avíseme si no estoy seguro de todos modos o podría proporcionar una explicación más detallada. De nuevo, muchas gracias por tomarse el tiempo para mirar esto - ustedes son geniales!

Nathan

Answer 1

Puede inicializar la funcionalidad de arrastre en el clon mediante la función draggable() y eliminar la clase objectDrag para que los objetos recién agregados no comiencen a crear sus propios clones.

$(".objectDrag").draggable({
    helper:''clone''
});  

$("#artCanvas").droppable({
    accept: ".objectDrag",
    drop: function(event,ui){
        var new_signature = $(ui.helper).clone().removeClass(''objectDrag'');
        new_signature.draggable();
        $(this).append(new_signature);
    }
});

JSFiddle: http://jsfiddle.net/YRfVd/56/