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

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

I want to generate an image with the click of a button that is also instantly draggable and droppable. I’ve linked my code to jquery and jquery ui (directory path is correct) but im still not able to drag the images. Can anyone offer advice on whats wrong here?

Answer 1

You should change the draggable declaration to:

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

At he stage where this line is executed there is no dragMe class to your image and therefore it’s not made draggable.

You probably want the dragMe class to give visual indication of draggability but the actual draggable functionality should be probably made always available.