Question

I create some elements on runtime (js)
and make them draggable:

function fillAttachmentsPerPage(pageNum) {
    createAjaxRequest("Manager/GetAttachments", {
        'locationId': current_folder.attr('id'),
    }).done(function (res) {

        for (var i = 0; i < res.Attachments.length; i++) {

            attachmentDiv = '<div class=\"attachmentDiv ui-draggable\" id="'+ res.Attachments[i].AttachmentId +'" onmouseover=\"attachmentDiv_hover(this);\"'+
            'onmouseout=\"attachmentDiv_onmouseout(this);\">' +
'</div>​';

        }



         $( ".attachmentDiv" ).draggable({
        //    start: function(event, ui) { ... }
            revert: 'invalid',
            drag: function(event, ui) { console.log("dragging") }
        });


        $('a:has(ins)').droppable({
           drop: function(event, ui) {
           console.log($(this).parent())
           setCurrentAttachment(ui.draggable.attr("id"));
           UpdateAttachmentLocation(ui.draggable.attr("id"), $(this).parent().attr("id"))

          }
        });

    });
}


 $( ".attachmentDiv" ).draggable({
//    start: function(event, ui) { ... }
    revert: 'invalid',
    drag: function(event, ui) { console.log("dragging") }
});

It works great.

After I drop this element in on dragable element

I create the same elements again, but without the one dropped.

The above registration code is executed again, but yet the elements are not draggable.

Any idea why?

Answer 1

Because the elements are being added once the page has loaded, you might need to use the jQuery .on method. However, I don’t believe the .draggable method works with .on.

A way of getting around this is to extend jQuery using the code below:

(function($) {
    $.fn.liveDraggable = function(opts) {
        this.on("mousemove", function() {
            $(this).draggable(opts);
        });
    };
}(jQuery));

You need to add it after you’ve loaded jQuery, but before you try and use it in your code. Then rather than using:

$(".attachmentDiv").draggable

You use:

$(".attachmentDiv").liveDraggable