Droppable 事件偶尔不起作用答案

【问题标题】：Droppable event occasionally not workingDroppable 事件偶尔不起作用
【发布时间】：2019-01-16 14:03:00
【问题描述】：

对于拖放功能，我使用的是 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/

【问题讨论】：

你的小提琴似乎工作正常。我把所有东西都拖了过来，一点问题都没有。请提供有关它“有时不起作用”的更多信息。出现这些问题时检查控制台
@RoryMcCrossan 请尝试两次，三次，有时有效，有时无效
我已经完成了。我已经移动了每个项目，以便它们都在每个容器中并再次退出并且完全没有问题。你检查过控制台吗？
@RoryMcCrossan screencast.com/t/HYwIptdCQp 请查看此链接

标签： javascript jquery jquery-ui jquery-ui-droppable droppable

【解决方案1】：

上述问题归结为这个监听器：

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

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

我的想法是，这是由于可放置区域的大小波动所致。我所做的只是为了测试/证明我的理论是使该区域高度为100%，因此我无法看到可放置监听器的失火。

Here is the jsFiddle

注意变化：

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

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

【讨论】：