Dynamically added draggable object not working the first time

Question

I am adding the draggable functionality to an element on a particular user event(hold event). Drag functionality is not working the first time.

    Hammer(element).on("hold",function(event){
        console.log("hold");
        $(element).draggable({
                helper: "clone",
                cursorAt: { left: 5, top: -5 },
                cursor: "move",
                stop: function() {
                        $(element).draggable("destroy");
                }
        });
    });

In the above code snippet, the hold event triggers the draggable functionality but it only works when I release the hold and try it the next time. How can make the drag initiate on hold itself rather than the next time?

EDIT:

Added a sample code in jsbin .

Answer 1

This works for me:

$('.pic').draggable({
    revert: 'invalid',
    start: function(event, ui) {

    },
    stop: function(event, ui) {
        $(this).removeClass('dragging');
    }
});

$('body').hammer().on('hold', '.container li', function() {
    $('.pic', this).addClass('dragging');
});

$('body').hammer().on('dragstart', '.container li .pic', function(e) {
    if (!$(this).hasClass('dragging')) {
        e.preventDefault();
    }

});

Answer 2

How about using a delay on the draggable instead of the hold Hammer event?

 $(element).draggable({
                helper: "clone",
                cursorAt: { left: 5, top: -5 },
                cursor: "move",
                stop: function() {
                        $(element).draggable("destroy");
                },
   start: function() {
     console.log("start");
   },
                delay:300
        });