Question

这是我的代码：

{//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做错了什么？（如果你不知道答案，请投票）

Answer 1

使用您的代码的一切都很好，您只是缺少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/

需要使图像可拖动和可调整大小

1 个答案: