Thursday, September 25, 2008

jQuery UI draggables - helper CSS class

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

Then just create a style for ui-draggable-helper, e.g.

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

2 comments:

Anonymous said...

Thanks for the tip!

MichaelE said...

Awesome! This fixed my issue. Thanks for the post!