CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-droppable
Eric J.
Eric J.

Reputation: 150108

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?

Upvotes: 0

Views: 1141

Answers (1)

Aditya Singh
Aditya Singh

Reputation: 9612

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

Upvotes: 2

Related Questions