Live Droppable UI元素仅在第二次尝试时接受Drop

我有通过Ajax动态添加到页面的JQuery UI Droppables。 尝试按照指南以实时方式连接Droppables：

jQuery UI Droppable：如何让它生效？

在第一次尝试拖放时， hoverClass没有挂钩，也没有hoverClass目标是已注册的Droppable （放置事件处理程序不会触发）。 在后续尝试中，它按预期工作。

小提琴： http ： //jsfiddle.net/ericjohannsen/ESCN9/

如何让dropfunction第一次运行？

Answer 1

只有当您将鼠标hover在“ctFilterDropArea”元素上并启动实时可放置function时，您的代码才有效。

拖动另一个div后，尝试启动liveDroppable实现。

JSFiddle： – http://jsfiddle.net/ESCN9/3/

 $.fn.liveDroppable = function (opts) { if (!$(this).data("ctDropInit")) { $(this).data("ctDropInit", true).droppable(opts); } }; $('#dragMe').draggable({ cursor: "move", distance: 20, opacity: 0.7, helper: 'clone', start: startDroppable }); function startDroppable() { $('#ctFilterDropArea').liveDroppable({ hoverClass: "ctDropHover", drop: function (event, ui) { alert("Dropped!"); } }); }