Question

我有一个交互式篮子，用户可以将物品拖放到篮子里。但是，同一个项目不能放在篮子里两次（但它仍然可见，虽然已经褪色），所以一旦它在篮子里，必须禁用draggable属性。

我试过这样做：

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

但是，由于这只是启动draggable()属性，即使我在on时添加了dropped类，该元素仍然可以拖动。

因此，如果没有draggable属性的多个实例，我就无法看到实现此目的的方法：

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

通过上述方法，我可以调用个人product_badge并禁用拖动，如下所示：

只有在项目放入购物篮后才会调用（已删除）

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

有没有更好的方法来实现这一目标？您是否可以将HTML元素设置为只有在没有特定类的情况下才可拖动？

更新

Answer 1

使用cancel属性。

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

小提琴：

Answer 2

您可以使用开始事件

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