dragging items based on percentage to containment element

Question

Here is what it looks like;

$( \"#box ul li\" ).draggable({
    helper: \"clone\"
});
$( \".item\" ).draggable({containment: \".door\"});

$( \".door\" ).dro         


        

Answer 1

Little bit updated version of all above:

$('.element').draggable({
    containment: 'parent',
    stop: function( event, ui ) {
        var $elm = $(this);
        var pos = $elm.position(),
            parentSizes = {
                height: $elm.parent().height(),
                width: $elm.parent().width()
            };

        $elm.css('top', ((pos.top/parentSizes.height) * 100) + '%').css('left', ((pos.left/parentSizes.width) * 100) + '%');
}});