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.UI CSS 文件：

<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 回答