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: /

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/mB6GK/2/

• javascript
• jquery
• html
• jquery-ui
• draggable

• Can you add a jsfiddle? – Stephen King Commented Jul 8, 2013 at 19:42

2 Answers 2

use the cancel property.

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

fiddle:

http://jsfiddle/sGguz/

You could use the start event,

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

http://jsfiddle/mB6GK/4/