перетащите сгенерированное изображение с помощью jQuery

Question

Вот мой код:

$(document).ready(function() {

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

    $('.canDrag').hover(
        function() {
            $(this).addClass('dragMe');
        },
        function() {
            $(this).removeClass('dragMe');
        }
    );

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

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

Answer 1

Вы должны изменить перетаскиваемое объявление на:

$('.canDrag').draggable();

На этапе, на котором выполняется эта строка, у вашего изображения нет класса dragMe, и, следовательно, он не становится перетаскиваемым.

Вы, вероятно, хотите, чтобы класс dragMe предоставлял визуальную индикацию способности перетаскивания, но фактическая функциональность перетаскивания, вероятно, должна быть всегда доступна.