0

こんにちは、Ajax で画像を div にアップロードするサイトを持っています。この画像はサイズ変更およびドラッグ可能である必要があります。問題は、サイズを変更すると機能することです。ドラッグすると、オーバーフローがあるように見えます。私は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')});
}
4

1 に答える 1

3

画像を div で囲みます。次に、その div をサイズ変更およびドラッグ可能にします。画像のサイズを変更できるようにするには、「alsoResize」オプションを使用します。 $( ".divSelector" ).resizable({ alsoResize: "#imageSelector" });

そうしないと、サイズ変更可能なjQuery UIが画像をdiv（非表示部分）でラップします。

于 2013-06-01T19:58:17.420 に答える