Question

Okay, when something is draggable, it is given the class .ui-draggable
And when something is disabled from being draggable .ui-draggable-disabled

I want to select only items that are draggable.

I’m using the following selector, but it doesn’t seem to work. My disabled draggable items are still doing something on hover. Any ideas why?

$('.ui-draggable').not('.ui-draggable-disabled').hover(function() {
// rest of code

Thanks

Answer 1

Try:

// selector means "doesn't have", ':not(:has(selector))'
$(".ui-draggable:not(:has(.ui-draggable-disabled))").hover(function() { ...

or:

$('.ui-draggable').not(':has(.ui-draggable-disabled)').hover(function() {

or test for the presence of the disabled class within the hover mouseover/mouseout functions:

$(".ui-draggable").hover(function() {
    if(!$(this).hasClass("ui-draggable-disabled")) {
        // do stuff
    }
}, function() {
    if(!$(this).hasClass("ui-draggable-disabled")) {
        // do stuff
    }   
});