I have a div which start with width:0 & height: 45px. 

when a droppable accepted object is 'picked up' (being dragged) a jQuery animation expends the div to width:135px, then the div should accept objects as it was defined as when the page finished loading. strangly enough the droppable is not enabled until the object crosses the top side of the div, after it does though, it works normal. Any ideas?

css:

#shareArea {
    background
-color:rgba(255, 255, 255, 0.8);
    position
: absolute;
    top
: 5px;
    right
: 15px;
    height
: 45px;
    width
: 0;
    z
-index: 11;
    overflow
: hidden;

    

-webkit-border-radius: 10px;
    
-moz-border-radius: 10px;
    border
-radius: 10px;

    

-moz-box-shadow: 0px 0px 5px #000000;
    
-webkit-box-shadow: 0px 0px 5px #000000;
    box
-shadow: 0px 0px 5px #000000;
}

Droppable settings:

$('#shareArea').droppable({
            accept
: ".link",
            hoverClass
: "share_hover",
            tolerance
: "intersect",
            drop
: function( event, ui ) {
                console
.log('link:');
                
var link = ui.helper.find('a').attr('href');
                console
.log(link);
                $
.ajax({
                    type
: 'GET',
                    url
: '/member/links/getShare/',
                    contentType
: 'application/x-www-form-urlencoded; charset=utf-8',
                    async
: false,
                    data
: {
                        link
: link
                    
},
                    success
: function(response){
                        
var html = '<div id="modal_frame">' + response + '</div>';
                        $
('body').append(html);
                        $
('#modal_frame').draggable({
                            cursor
: 'move',
                            containment
: 'document'
                        
});
                        
ShareModal.init();
                    
}
                
});
            
} 
        
});