Droppable event occasionally not working

Question

For drag and drop functionality I am using jquery-1.12.4.js and jquery-ui.js. When I am using the droppable function of this it is some times working and some times not. This is my javascript code:

$(function() {
  $(".connectedSortable").sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();
});

$(document).ready(function() {
  $(".connectedSortable").droppable({
    drop: function(event, ui) {
      console.log("event--", event);
    }
  });
});

Here is my full code: http://jsfiddle.net/vgmz6qnj/1/

Answer 1

The stated problem boils down to the fact that this listener:

$(".connectedSortable").droppable({
  drop: function(event, ui) {
    console.log("event--", event);
  }
});

Does not fire consistently (as shown in the posted by OP video).

My thinking is that this is due to the droppable area fluctuating in size. What I did just to test/demonstrate my theory was to make that area height 100% and with that I was not able to see a miss-fire of the droppable listener.

Here is the jsFiddle

Note the changes:

1. Added some CSS to make the body/html/table height 100% in order to have unlimited horizontal drop area.
2. Added a class to the table called tableContainer.

Please correct me if I am wrong on my assumptions.