Question

I have the following code that creates a draggable and droppable element/area. And when I drag my draggable to the droppable it clones it and keeps it in the droppable. But I cannot readd the draggable function to it to allow it to be dragged elsewhere? I’ve tried .on/.live using the ui.helper/ui.draggable as the cloned element, changing the ID. But no luck.

$(function(){

    $('.kpp_photopop').draggable({
        containment: 'form',
        cursor: 'move',
        helper: 'clone',
        snap: true,
        snapMode: 'outer'
    });

    $('.kpp_photopop_drop').droppable({
        accept: '.kpp_photopop',
        drop: function( event, ui ) {

            // Clone
            var element = ui.helper.clone();
            $(this).append(element);

            // Remove x
            ui.helper.children('.kpp_photo_x').remove();

            // Attach draggable to clone
            $(this).children('.kpp_photopop').removeClass('ui-draggable-dragging ui-draggable').attr('style','').children('.kpp_photo_x').remove();
            $(this).children('.kpp_photopop').draggable();
        }
    });
});

Answer 1

It looks like you’re removing and cleaning up more then you’d actually need to, and you’re re-initializing draggable on all of the children of the drop area at once.

Here’s a jsfiddle of what you’re looking for: http://jsfiddle.net/fordlover49/wRJNe/

Note that I also added some manipulation with the offset so that when you append it, it doesn’t jump in position.