Make element draggable on mousedown event of its own implicitely

Question

Hello I am trying with following code to make clicked element draggable at runtime, but its not working for any element for its very first click after first click its working fine, I dont know why it happen,Please help me out. Mine code is as follows:-

$(document).ready(function(){   
    $(document).mousedown(function(event) {
        $("#"+$(event.target).attr("id")).draggable();
        console.log($(event.target).attr("id"));
    });
});

Answer 1

Your .draggable call is in the mousedown handler - that way it is initialized on the first click. You might initialize it in the $(document).ready handler instead to make it work on first click:

$(document).ready(function(){   
    $("div.dragMe").draggable();
    $(document).mousedown(function() {
        console.log($(this).attr("id"));
    });
});

In this code, all div s having the class="dragMe" would be made draggable.