CODEWITHSUNDEEP
htmlcssjquery-uijquery-ui-draggable
John
John

Reputation: 13735

With JQueryUI Draggable, how to select object being dragged

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?

Upvotes: 0

Views: 210

Answers (1)

Joseph Silber
Joseph Silber

Reputation: 220136

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

Upvotes: 3

Related Questions