CODEWITHSUNDEEP
jqueryjquery-ui
aherrick
aherrick

Reputation: 20179

jQuery UI Draggable to Droppable Resize Page?

I have this simple example where I am working with jQuery UI Draggable/Droppable

http://www.andrewherrick.com/spike/dragme/

Everything is working great the only problem I'm trying to counter is once the icon is dropped and the actual browser is resized, the draggable element does not stay within its container.

Does anyone have a simple solution for this?

Upvotes: 0

Views: 958

Answers (1)

James Montagne
James Montagne

Reputation: 78730

Since, once dropped, the elements can no longer be dragged, you can handle this in the drop event. Once dropped, append the element to the container. If position matters, set the position of the container to relative and recalculate the position of the element based on position of the container.

http://jsbin.com/afisim/2/edit#preview

$('.droppable').droppable({
    hoverClass: "activeHover",

    drop: function (event, ui) {
        $.ui.ddmanager.current.cancelHelperRemoval = true;

        $(ui.helper).css({
            top: <CALCULATE_THIS>,
            left: <CALCULATE_THIS>
        })
        .appendTo($(this));
    }

});

Upvotes: 1

Related Questions