Geek asks and answers

JQuery UI draggable and adding a class while dragging

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

However, the following code that I wrote does not work properly;

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

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

Thanks in advance.

+5
source share
3 answers

From jQuery UI Draggable documentation :

. While dragging, the element also gets the ui-draggable-dragging class

You can simply write CSS to use this class, rather than trying to add a class.

+14
source

CSS - . , -

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

. html , <style>

+5

I assume that we will add a new class my_class at the beginning of dargging, then the code should look like this:

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

CSS

.my_class{
/* YOUR CLASS CSS */
}

Refer to JSFIDDLE to add and remove a class when you start dragging and dragging the end

+2
source

More articles:


All Articles