jQuery droppable出现"Uncaught TypeError: undefined is not a function"错误

Question

我想启用拖拽元素并将它们放置在指定的元素容器中。但是当我加载我的网站时，控制台会显示：Uncaught TypeError: undefined is not a function ... presentation-categories.js?version=1:23。

第23行是$( ".panel-body" ).droppable({开始的地方。

我尝试删除整个$( ".panel-body" ).droppable(...);然后draggable起作用了，但我需要拖放容器。

这是实际的presentation-categories.js:

var dropped = false;

$( ".draggable-presentation" ).draggable({
  appendTo: ".my",
  zIndex: 999999999,
  placeholder: "sortable-placeholder",
  revert: true,
  cursorAt: {
    left: 67,
    top: 43
  },
  helper: function() {
    var presBackground = $(this).find('.slide').css('background');
    var presentationName = $(this).find('strong').html();
    var helper = $('<div class="slide-helper"></div>').html(presentationName).css({background: presBackground});
    return helper;
  }
});

$( ".panel-body" ).droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  accept: ".slideshowWindow, .draggable-presentation, .slide",
  drop: function( event, ui ) {
    dropped = true;
  }
}).sortable();

PS: 我已经正确包含了jQuery和jQuery-ui脚本，并且使用的是最新版本。

- Patrik Krehák

---

请问您能展示一下您的脚本标签吗？我知道您说您已经正确地包含了它们，但是这个错误最有可能的原因是那里出了问题。第23行上的“undefined is not a function”表明droppable未被定义。 - Alex P

我正在使用 require.js，所以：require(['jquery', 'jquery-ui'], function($) {。这必须是正确的，因为其他 jQuery-ui 交互效果都很好。 - Patrik Krehák

你能记录 $ 的内容以及 $('.panel-body').droppable 吗？ - hansn

console.log($('document').sortable()); -> 元素选择器 console.log($('document').droppable()); -> 类型错误。我不知道为什么，但是sortable和droppable都是jQuery-ui的交互。 - Patrik Krehák

Answer 1

我收到了相同的错误信息，并通过更新我的jQuery UI javascript文件解决了它。

前往http://jqueryui.com/download，确保选中“可拖放(Droppable)”选项并点击下载。

现在你将拥有一个包含可拖放功能的jQuery UI javascript文件。

- ViRuSTriNiTy

---

抱歉，我差点忘记了你的答案:D 是的，我记得更新jQuery-UI可以解决问题。 - Patrik Krehák

Answer 2

在我的情况下，这是因为在包含了jquery-ui之后又重复包含了jquery，所以请确保在jquery-ui之前已经包含了jquery。

- Nishad Up

---

我正在使用requireJS，因此jQuery始终在jQuery-ui之前加载，但正如我之前在评论中所说，我只需要升级jQuery-ui到最新版本。现在使用CDN jQuery，所以这对我来说不应该再发生了。 - Patrik Krehák