Disable jQuery UI draggable if element has a specific class

Question

I have an interactive basket in which the user can drag an item to the basket. However, the same element cannot be placed in the basket twice (but it remains visible, although pale), therefore, as soon as it is in the basket, the draggable property must be disabled.

I tried to do this:

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

However, since this only initiates the draggable() property, the element is still being dragged even if I add the on class to it when it was dropped .

Therefore, I do not see a way to achieve this without having multiple instances for the draggable property, for example:

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

Using the above method, I can then call a separate product_badge and disable the drag and drop as follows:

This is only called after the item has been placed in the trash (dumped)

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

Is there a better way to achieve this? Can you set an HTML element for drag and drop only if it does not have a specific class?

Update

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

Answer 1

use the cancel property.

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

violin:

http://jsfiddle.net/sGguz/

Answer 2

You can use the start event,

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

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