Question

Here is my code:

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

The directory path for both jquery and jquery ui are correct, but I’m still not able to drag images with the class 'canDrag'.Any thoughts?

Answer 1

You need to call the initialization code after the image is created. At present, when you create a new image, it’s entirely new and doesn’t have your events attached to it. Try something like this:

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