CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uidraggable
Ben Carey
Ben Carey

Reputation: 16968

Disable jQuery UI draggable if element has particular class

I have an interactive basket whereby the user can drag and drop an item into the basket. However, the same item cannot be placed in the basket twice (but it remains visible, albeit faded), so once it is in the basket, the draggable property must be disabled.

I tried doing this:

$("#product_badges li:not(.on)").draggable({
    // Options here
});

However, as this just initiates the draggable() property, the element is still draggable even if I do add the on class to it when it has been dropped.

I therefore cannot see a way of achieving this without having several instances for the draggable property like so:

$("#product_badges li:not(.on)").each(function(){
    $(this).draggable({
        // Options here
    }
});

With the above method I can then call the individual product_badge and disable dragging like so:

This only gets called once the item has been placed into the basket (dropped)

$('.item',$('#product_badges')).draggable('disable');

Is there a better way of achieving this? Can you set an HTML element to only be draggable if it does not have a particular class?

Update

See example here: http://jsfiddle.net/mB6GK/2/

Upvotes: 4

Views: 3931

Answers (2)

Stephen King
Stephen King

Reputation: 836

You could use the start event,

$("#container").draggable({ 
      start: function( event, ui ) 
       { return !$(ui.helper).hasClass('nodrop'); }});

http://jsfiddle.net/mB6GK/4/

Upvotes: 0

Lyn Headley
Lyn Headley

Reputation: 11598

use the cancel property.

$("#product_badges li").draggable({ cancel: ".no" })

fiddle:

http://jsfiddle.net/sGguz/

Upvotes: 6

Related Questions