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

Question

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

jQuery UI Droppable : how to make it live?

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

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

如何让drop功能第一次运行？

Answer 1

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

在拖动另一个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!");
        }
    });
}