jquery droppable error

Question

这是我的代码。

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

我收到以下错误：

$（ “＃选择”）可放开不是一个函数。

这应该是什么解决方案？

Answer 1

您可能遇到以下问题之一尊重你的<script>标签：

• jQuery UI是否被正确包含在所有？
• 是否包含jQuery 之前 jQuery UI？ （这不应该是问题，否则你会得到一个不同的错误）
• jquery被包括在内后来在页面中，jQuery UI？ （这将删除任何插件，包括jQuery UI的，因为它重新定义了jQuery对象）

第三个是一种很常见的被忽视的问题，其中所有的jQuery UI添加的插件得到另一个jQuery的交口称赞包括覆盖jQuery对象。

Answer 2

只是一对夫妇的标准检查下列事项：

1）你有没有包括的jquery.js这个脚本之前& jqueryui.js？
2）在这行之前是否有语法错误？
3）你是否在$（document）.ready（...）或同等内容（不一定是问题，但以防万一）内执行此操作

Answer 3

以防万一有人仍然需要这个：你可能已经说明了上述所有内容，但仍然无效。如您所知，现在您可以下载jquery ui的自定义版本。

检查您的是否有可拖动组件。如果不确定，请尝试从http://jqueryui.com/download下载并确保也检查组件可放置。

（这是我的情况）

Answer 4

在Angular为我工作之前添加JQuery脚本。 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 5

搜索者的利益（以下关于角@Paulo佩德罗索的答案）。

在链接函数中使用元素时，可以通过AngularJS指令看到此错误。

对我来说问题在于元素是通过jqLit​​e元素而不是JQuery来实现的。必须将其转换为JQuery才能访问JQuery UI函数。即

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

没得做另一个应用这种转换（但不知道为什么），所以在这里发帖救别人了一下调查的。