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

Question

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

jQuery UI Droppable：如何让它活起来？

在第一次尝试拖放时，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!");
        }
    });
}