jQuery UI draggable and adding class on drag event

Question

I am trying to add a class to the draggable event using jQuery UI.

However the following code that I've written is not working as expected;

$(function () {
    $('ul.sortable div.draggable').draggable({
        start: function(event, ui) { ui.helper.addClass('move'); },
    });
});

Essentially I am trying to add a drop shadow (using the move class) to the div.draggable. What am I doing wrong as the drag event works, but the drop shadow does not appear?

Thanks in advance..

Answer 1

From the jQuery UI Draggable documentation:

. During drag the element also gets a class of ui-draggable-dragging

You could just write the CSS to leverage this class as opposed to trying to add a class.

Answer 2

Same CSS inheritance still applies. If you have your own stylesheet include something like

.ui-draggable-dragging{
    box-shadow:0 0 2px #000;
}

If you do not have a stylesheet. You can still add this inline within your html files using <style> tags