javascript - 要素に特定のクラスがある場合、jQuery UI のドラッグ可能を無効にする

Question

ユーザーがアイテムをバスケットにドラッグアンドドロップできるインタラクティブなバスケットがあります。ただし、同じアイテムをバスケットに 2 回入れることはできません (ただし、色あせていても表示されたままです) draggable。

私はこれをやってみました：

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

ただし、これはプロパティを開始するだけなので、クラスをdraggable()追加したとしても、要素はドラッグ可能です。ondropped

draggableしたがって、次のようなプロパティのインスタンスをいくつか持たないと、これを達成する方法がわかりません。

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

上記の方法を使用すると、個人を呼び出してproduct_badgeドラッグを無効にすることができます。

これは、アイテムがバスケットに配置された (ドロップされた) 場合にのみ呼び出されます。

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

これを達成するためのより良い方法はありますか？特定のクラスがない場合にのみ、HTML 要素をドラッグ可能に設定できますか?

アップデート

ここで例を参照してください: http://jsfiddle.net/mB6GK/2/

score 6 · Accepted Answer

プロパティを使用しcancelます。

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

フィドル:

score 0 · Accepted Answer

開始イベントを使用できます。

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