可调整大小和可拖动的jQuery溢出

时间:2013-05-14 09:33:18

标签: jquery jquery-ui-draggable jquery-ui-resizable

大家好,我有一个网站,我在一个div中上传Ajax中的图像,这个图像可以调整大小和拖动。 问题是,如果我调整它,工作,如果我拖动它似乎有一个溢出:隐藏因为我拖动左图像消失后的限制。 我见过HTML代码,有

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

如果我放入样式表:

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

拖动工作,但现在无法调整大小! 我该如何解决?

这是代码:

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

1 个答案:

答案 0 :(得分:3)

将图像包裹在div中。然后使div可调整大小和可拖动。要允许调整图像大小,请继续使用“alsoResize”选项: $(“。divSelector”)。resizable({alsoResize:“#imageSelector”});

如果不这样做,jQuery UI可调整大小将使用div包裹你的图像(这是不可见的部分)。