jquery droppable error

Question

Here is my code.

$("#selected").droppable({
drop: function() {
    total = total + 1;
        alert('total : ' + total);
    }
});

I am getting following error:

$("#selected").droppable is not a function.

What should be the solution for this?

Answer 1

You likely have one of the following issues with respect to your <script> tags:

• Is jQuery UI being included properly at all?
• Is jQuery included before jQuery UI? (this shouldn't be the issue, or you'd get a different error)
• Is jQuery being included again later in the page, after jQuery UI? (this will erase any plugins, including jQuery UI, since it re-defines the jQuery object)

The third is a very common overlooked issue, where all of the plugins that jQuery UI add get blown away by another jQuery include overwriting the jQuery object.

Answer 2

Just a couple of standard things to check:

1) Have you included jquery.js & jqueryui.js before this script?
2) is there a syntax error before this line?
3) Are you doing this inside a $(document).ready(...) or equivalent (shouldn't necessarily be a problem, but just in case)

Answer 3

Adding JQuery scripts before Angular worked for me. Dragdrop documentation lacks this piece of information.

My index.html ended up like this:

 <script src="bower_components/jquery/dist/jquery.js"></script>
 <script src="bower_components/jquery-ui/jquery-ui.js"></script>
 <script src="bower_components/angular/angular.js"></script>