jquery droppable error

Here is my code.

$("#s开发者_开发百科elected").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?

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.

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)

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>

Just in case somebody still needs this: you may have everything stated above ok, but still it won't work. As you know, now you can download custom versions of jquery ui.

Check to see if yours has the draggable component. If not sure, try to re download from http://jqueryui.com/download and be sure the component droppable is also checked.

(this was my case)

For the benefit of searchers (following @Paulo Pedroso's answer relating to Angular).

This error can be seen with AngularJS Directives, when using the element in the link function.

The problem for me was the element was coming through as a jqLite element, not JQuery. Had to convert it to JQuery in order to get access to the JQuery UI functions. I.e.

myApp.directive('jqDrop', ['$rootScope', function ($rootScope) { 
    return {
        restrict: 'A',
        link: function (scope, elm, attr) {

            // NOTE: elm comes in under jqLite, so need to jQuery it.
            $(elm).droppable({
                drop: function (event, ui, x) {
                    // Do stuff here...
                },
                greedy: false,
                over: function (event, ui) {
                },
            });
        }
    };
}]);

Didn't have to do this conversion on another app (but not sure why), so posting here to save someone a bit of investigating.