如果元素具有特定类，则禁用 jQuery UI 可拖动答案

【问题标题】：Disable jQuery UI draggable if element has particular class如果元素具有特定类，则禁用 jQuery UI 可拖动
【发布时间】：2013-07-08 19:39:32
【问题描述】：

我有一个交互式购物篮，用户可以将一个项目拖放到购物篮中。但是，同一个项目不能在篮子中放置两次（但它仍然可见，尽管已褪色），所以一旦它在篮子中，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 元素设置为只有在没有特定类时才可拖动？

更新

【问题讨论】：

【解决方案1】：

使用cancel 属性。

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

小提琴：

【讨论】：

【解决方案2】：

你可以使用开始事件，

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

【讨论】：