Live Droppable UI Element Only Accepts Drop on Second Try

问题

I have JQuery UI Droppables that are dynamically added to the page via Ajax. Attempting to follow the guidance to connect the Droppables in a live manner:

jQuery UI Droppable : how to make it live?

On the first attempt to drag-and-drop, the hoverClass is not hooked up nor is the drop target a registered Droppable (the drop event handler does not fire). On subsequent attempts, it works as expected.

Fiddle: http://jsfiddle.net/ericjohannsen/ESCN9/

How can I get the drop functionality to work the first time?

回答1:

Your code works only when you hover on the "ctFilterDropArea" element and which initiates the live droppable functionality.

Try starting your liveDroppable implementation once the another div is dragged.

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!");
        }
    });
}

来源：https://stackoverflow.com/questions/14889058/live-droppable-ui-element-only-accepts-drop-on-second-try