Question

I am using JQueryUI draggable and I would like to be able to add styling to the draggable element while it is being dragged. I have tried variations on this code:

$(".ui-widget-content").draggable({
  drag: function(event, ui) {
    $(this).css("width", "50px");
  });

However, my attempts have failed and I believe it it because I don’t know how to get the draggable element from the ui object. What am I missing?

Answer 1

No need for extra JavaScript. Just use this CSS selector:

.ui-draggable-dragging {
    /*
    This class is applied to the element while it is being dragged.
    This is done automatically by jQueryUI.
    */

    width: 50px;
}

Read the docs here: http://jqueryui.com/demos/draggable/#overview-main