¿Cómo puedo diseñar el clon arrastrable de jQuery?

¿Cómo puedo aplicar estilo a un clon arrastrable de jQuery con CSS?

Consulte la segunda respuesta de tohster: esto está desactualizado.

=======

http://webdevel.blogspot.com/2008/09/jquery-ui-draggables-helper-css-class.html esto podría ser una ayuda

Citando del sitio anterior:

Mientras trabajaba con interfaz de usuario de jQuery draggables, he notado que no parece haber una clase asociada con el ayudante arrastrable, por lo que tiene el mismo estilo que el arrastrable que seleccionó. Como resultado, debe recurrir a la opción de función de inicio para agregar la clase dinámicamente:

$(".dragme").draggable({helper: "clone",
 start: function(e, ui)
 {
  $(ui.helper).addClass("ui-draggable-helper");
 }
});

Como resultado, debe recurrir a la opción de función de inicio para agregar la clase dinámicamente:

.ui-draggable-helper {
 border: 1px dotted #000;
 padding: 6px;
 background: #fff;
 font-size: 1.2em;
}

hay una mejor manera

jQuery UI ha evolucionado desde que se publicó la respuesta en 2011.

Con las versiones actuales de jQuery, el .ui-draggable-dragging La clase se agrega al clon que se está arrastrando.

Entonces, por ejemplo, si tiene el siguiente elemento arrastrable:

<div class="myDraggable">
</div>

<script>
   $('.myDraggable').draggable({opacity: 0.7, helper: "clone"});
</script>

<style>
   .myDraggable.ui-draggable-dragging { background: red; }
</style>

..entonces el clon del elemento myDraggable tendrá un fondo rojo cuando se levante y se arrastre.

La clase de ayuda está presente en jQuery UI 1.7.1 en adelante, y también puede estar presente en algunas versiones anteriores, pero no lo he rastreado.

El enfoque más limpio es usar la función auxiliar:

function getHelper(event, ui) {
    var helper = $(ui).clone();
    helper.addClass("ui-draggable-helper");
    return helper;
}

$('.myDraggable').draggable({
    helper: getHelper
});