禁用jQuery UI draggable if元素具有特定的类

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.

但是，由于这只启动了draggable()属性，所以即使我在元素被删除时向其添加on类，元素仍然是draggable()。

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:

通过上面的方法，我可以调用单个的product_badge，并像这样禁用拖拽:

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?

有更好的方法来实现这一点吗?如果一个HTML元素没有特定的类，你能将它设置为只能被拖拽吗?

Update

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

看例子:http://jsfiddle.net/mB6GK/2/

2 个解决方案

#1

use the cancel property.

使用取消财产。

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

fiddle:

小提琴:

http://jsfiddle.net/sGguz/

#2

You could use the start event,

你可以用开始事件，

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

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

#1