как перетащить сгенерированное изображение с помощью 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');
        }
    );

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

Путь к каталогу для jquery и jquery ui правильный, но я все еще не могу перетаскивать изображения с классом 'canDrag'. Есть мысли?

Answer 1

Вам необходимо вызвать код инициализации после создания изображения. В настоящее время, когда вы создаете новое изображение, оно полностью новое и к нему не прикрепляются ваши события. Попробуйте что-то вроде этого:

$('#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');
        }
    );

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