1

これが私のコードです：

{//Add Image
    $('#add_btn').click(function() {    
        var src$ = $('#img_loc').val();
        $('<img>').attr({
            src: src$,
            class: 'item'})
        .addClass('canDrag')
        .appendTo($('#work_area'));

        $('.canDrag').draggable({
            snap:'.dropSpace'
        });
        $('.dropSpace').droppable({
            accept:'.canDrag'
        });

    });
}

{//Move
    $('#move').click(function() {
         $('#work_area .item').removeClass('resizeMe');         
         $('#work_area .item').addClass('canDrag');

        $('.canDrag').draggable({
            snap:'.dropSpace'
        });
        $('.dropSpace').droppable({
            accept:'.canDrag'
        });
    });
}

{//Resize
    $('#resize').click(function() {
        $('#work_area .item').removeClass('canDrag');
        $('#work_area .item').addClass('resizeMe');

        $('.resizeMe').resizable();
    });
}

ユーザーが画像を追加、ドラッグ、サイズ変更できるキャンバス（HTML 5キャンバス要素ではない）を作成しています。ユーザーは、それぞれのボタンを使用して「移動」および「サイズ変更」ツールをアクティブにしますids。他の効果を無効にするには、一方のボタンをクリックする必要があります（つまり、「移動」をクリックすると画像のサイズを変更できず、「サイズ変更」をクリックすると画像を移動できなくなります）

次のコードは画像をドラッグ可能にしますが、サイズを変更することはできません。誰かがivが間違ったことを説明できますか？（答えがわからない場合は投票してください）

4

1 に答える 1

0

コードのすべてが問題なく、resizable（）が動作するために必要なJquery.UICSSファイルが欠落しているだけです。

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

ここでそれを自分で見てください：http：//jsfiddle.net/gcQmM/2/

于 2011-12-14T00:16:01.710 に答える