可丢弃事件偶尔不起作用

Question

对于拖放功能，我使用 jquery-1.12.4.js 和 jquery-ui.js。当我使用它的 droppable 函数时，它有时有效，有时无效。这是我的 javascript 代码：

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

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

这是我的完整代码：http://jsfiddle.net/vgmz6qnj/1/

Answer 1

所述问题归结为以下事实：

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

不连续触发（如 OP 视频发布的所示）。

我的想法是，这是由于可放置区域的大小波动所致。我对 test/demonstrate 所做的我的理论是使该区域高度 100% 并且因此我无法看到可投放听众的失火。

Here is the jsFiddle

注意变化：

1. 添加了一些 CSS 以使 body/html/table 高度为 100%，以便拥有无限的水平放置区域。
2. 在名为 tableContainer 的 table 中添加了一个 class。

如果我的假设有误，请纠正我。