Question

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?

Answer 1

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

});