Problems with jQuery .not() and the draggable ui

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
    }   
});