Jquery droppable error

Question

Here is my code.

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

I get the following error:

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

What should be the solution for this?

Answer 1

You probably have one of the following issues regarding tags <script>:

• Is jQuery UI enabled correctly?
• Is jQuery enabled before jQuery UI? (this should not be a problem, otherwise you will get another error)
• Is jQuery enabled again later on the page after jQuery UI? (this will erase any plugins, including jQuery UI, as it overrides the object jQuery)

- , , jQuery UI, jQuery, jQuery.

Answer 2

, :

1) jquery.js jqueryui.js script?
2) ?
3) $(document).ready(...) ( , )

Answer 3

JQuery Angular . Dragdrop .

index.html :

 <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>

Answer 4

- : , , . , jquery ui.

, . , http://jqueryui.com/download , droppable .

( )

Answer 5

( @Paulo Pedroso, Angular).

AngularJS .

, jqLite, JQuery. JQuery, JQuery. .

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) {
                },
            });
        }
    };
}]);

( , ), , -, .