CODEWITHSUNDEEP
jqueryjquery-ui-draggablejquery-ui-resizable
Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

Resizable and draggable jQuery overflow

Hi all I have a site where I upload an image in Ajax in a div, this image mus be resizable and draggable. The problem is if I resize it, works, if I drag it seems that there is an overflow:hidden because I drag left the image disappear after its limit. I have seen html code and there is

ui-wrapper style="overflow:hidden..."

if I put in my stylesheet:

.ui-wrapper { 
    overflow:visible !important;
}

Drag works but now isn't resizable!!! How can I solve it?

this is the code:

.ui-wrapper { 
    overflow:visible !important;
}

$(document).ready(function(){

    var options = { 
        beforeSubmit: showRequest, 
        success:    showResponse
    }; 

    $('#upload-form').ajaxForm(options);
});

function showResponse(responseText){
    var id = 'image-resize_'+n_img_created;
    n_img_created++;
    $('<img class="draggable" id="'+id+'" '+responseText+'/>').appendTo("#space-drawable-div").resizable({
            maxWidth: 212,
            maxHeight: 220,
            start: function( event, ui ) {
                console.log('start resizable');
            },
            stop: function( event, ui ) {
                console.log('stop resizable');
            }
        }).draggable({ containment: $('#space-drawable-div')});
}

Upvotes: 0

Views: 511

Answers (1)

Mel Void
Mel Void

Reputation: 46

Wrap the image in a div. Then make that div resizable and draggable. To allow the image to be resized, go ahead and use the "alsoResize" option: $( ".divSelector" ).resizable({ alsoResize: "#imageSelector" });

What happens is that jQuery UI resizable will wrap your image with a div (that's the invisible part) if you don't.

Upvotes: 3

Related Questions