нужно сделать img перетаскиваемым и изменяемого размера - PullRequest
Новая
       44

нужно сделать img перетаскиваемым и изменяемого размера

1 голос
/ 12 декабря 2011

Вот мой код: 

{//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.Мне нужно нажать одну кнопку, чтобы отключить действие другой (т. Е. Когда нажата кнопка «перемещение», изображения не могут быть изменены, а когда нажата кнопка «изменить размер», они не могут быть перемещены)

Следующий кодделает изображения перетаскиваемыми, но я не могу изменить их размеры.Кто-нибудь может объяснить, что я сделал неправильно?(Пожалуйста, проголосуйте, если вы не знаете ответ)

1 Ответ

0 голосов
/ 14 декабря 2011

Все с вашим кодом в порядке, вам просто не хватает CSS-файла Jquery.UI, необходимого для работы resizable (): 

<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/

...