jquery ui，在嵌套的droppable悬停时检测真正的droppable区域

Question

我正在尝试构建一个嵌套droppable 的地方，在drop 事件上我正在附加自定义HTML 对象，它可能是droppable（这里总是droppable），
现在的问题是：

1. 如何通过当前选项再次为新附加元素调用 droppable？

2. 我想在上面检测真正的可放置区域，我做对了还是有更好的方法？
   （关于 droppable 是嵌套的）

这里是示例：Fiddle

Answer 1

这是我在 cmets 中提到的一个更好的例子：

http://jsfiddle.net/Twisty/pd3pur85/

JavaScript

$(function() {
  function makeDrop(target) {
    target.droppable({
      greedy: true,
      tolerance: 'touch',
      drop: function(event, ui) {
        ui.helper.detach();
        var newDrop = $("<div>", {
          class: "drop"
        }).appendTo($(event.target));
        $('.drop').removeClass('drag-hover');
        makeDrop(newDrop);
      },
      over: function(event, ui) {
        $('.drop').removeClass('drag-hover');
        $(event.target).addClass('drag-hover');
      },
    });
  }

  makeDrop($(".drop"));

  $('.drag').draggable({
    revert: 'true',
    helper: "clone",
  });
});

然后，您可以在 drop 期间将 Droppable 分配给您动态创建的 <div>。

就您的over 而言，我怀疑这是目前最好的用途。