need to make img draggable and resizable

Question

Here is my code:

{//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();
    });
}

I'm making a canvas (not HTML 5 canvas element) where a user can add images, drag them, and resize them. The user activates 'move' and 'resize' tools with buttons with those respective ids. I need the click of one button to disable to effect of the other (ie when 'move' is clicked, the images are not resizable and when 'resize' is clicked the images are not moveable)

The following code makes the images draggable, but i am not able to make them resizable. Can anyone explain what iv done wrong? (Please vote up if you dont know the answer)

Answer 1

Everything with your code is fine you're just missing the Jquery.UI CSS file needed for resizable() to operate:

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

Here see it yourself : http://jsfiddle.net/gcQmM/2/