"Uncaught TypeError: undefined is not a function" for jQuery droppable

Question

I want enable dragging elements and drop them in speciefied element container. But when I load my website, I get this in my console: Uncaught TypeError: undefined is not a function ... presentation-categories.js?version=1:23.

Line 23 is where $( ".panel-body" ).droppable({ starts.

I tried to remove a whole $( ".panel-body" ).droppable(...); and then draggable works, but I need drop-container.

This is actual 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: I have including both jQuery and jQuery-ui scripts right and also latest versions.

Answer 1

I got the same error message and i solved it by updating my jQuery UI javascript file.

Go to http://jqueryui.com/download and make sure the option "Droppable" is checked and click download.

You will now have a jQuery UI javascript file that includes the droppable functionality.