jquery - ドロップ可能なドロップが登録されていません

Question

ドロップすると、ドラッグしているリスト項目が（クラスを追加して）消えるようにしようとしています。

グラブされたときのコンソールログがあり、問題なくドロップしていますが、ドロップしてもaddClassまたはログメッセージは発生していません。どんな助けでも大歓迎です。

<script type="text/javascript" >
        $(document).ready(function(){  
            $('.draggable-demo-product').mousedown(function(){
                    $(this).addClass('grabbed');
                    console.log('grabbed');
            }); 
            $('.droppable').droppable({
                drop: function(){
                $('.draggable-demo-product').addClass('dropped');
                    console.log('dropped');
                }
            });        
        });
</script>