How can I style jQuery draggable clone?

Question

How can I style jQuery draggable clone with CSS?

Answer 1

Refer to second answer by tohster - this is outdated.

=======

http://webdevel.blogspot.com/2008/09/jquery-ui-draggables-helper-css-class.html this might be a help

Quoting from the above site:

While working with jQuery UI draggables, I have noticed that there does not seem to be a class associated with the draggable helper, and so it is styled in the same way as the draggable you selected. As a result you have to resort to the start function option to add the class dynamically:

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

As a result you have to resort to the start function option to add the class dynamically:

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

Answer 2

There's a better way

jQuery UI has evolved since the answer was posted in 2011.

With current versions of jQuery, the .ui-draggable-dragging class is added to the clone being dragged.

So for example, if you have the following draggable element:

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

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

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

..then the myDraggable element clone will have a red background when it is picked up and dragged.

The helper class is present in jQuery UI 1.7.1 onwards, and it may also be present in some earlier versions but I haven't tracked that down.

Answer 3

The cleaner approach is to use helper function:

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

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