Having problems with draggable clone object

Question

I am digging from past 5-6 hours and really in trouble . I am facing issues with draggable objects . What I am trying is I have a popup that is containing 18 small draggable divs . I need to drag one by one those draggable items from the popup and drop it to my document body . The popup is not a bootstrap one which actually freezes everything in the document unless you don't close it . So it's a simple popup . What I have tried so far is this :-

   $("#divLocatePops").find('.original').draggable({
        helper: 'clone'          
   });

   $('#divGeneralLayOutContentBody').droppable({
        accept: '.original',
        drop: function(event, ui) {
            $(this).append($(ui.helper));
        }
   });

It is creating clone successfully , even I am able to drag the clone object as well . But the moment I drop it to the divGeneralLayOutContentBody (this is my entire document id) , the clone object appends at the wrong positions . I cannot even see them sometimes but I can do see them in the DOM when I open my debugger tool .

One thing more , I have some applied css to the draggable items . I have set the top and left to the draggable items in order to have them properly aligned in the popup . I am not sure whether this is causing issue with the clone as when i create clone then obviously it also has the same css applied . But that too changes when I go on dragging my clonee object .

Any help would be much appreciated .

This is the popup I am talking about . You can see the draggable items 1,2,3,...18

http://prntscr.com/8c3dz9

Answer 1

Okay , so finally I got it working . Here is the solution I have tried

$("#divLocatePops").find('.original').draggable({
    helper: 'clone',
    revert: 'invalid'
});

$('#divGeneralLayOutContentBody').droppable({

    drop: function(event, ui) {
       var cloneTop=ui.helper.offset().top,
           cloneLeft=ui.helper.offset().left,
           containerTop=$(this).offset().top,
           containerLeft=$(this).offset().left;

//remove the `ui-draggable-dragging` class and make position relative
       var newDiv=$(ui.helper).clone(false).removeClass('ui-draggable-dragging').css({
            'position':'relative',
            'top':cloneTop-containerTop,
            'left':cloneLeft-containerLeft
        });

       $(this).append(newDiv); //This is the new div we are appending 
       $(ui.helper).remove();  // remove this cloned helper element 
       $(ui.draggable).draggable('destroy'); //destroy the draggable event on draggable element. This is done because once the element has been dragged , I don't want it to be dragged again . 
       newDiv.draggable(); //I want the appneded element draggable too
    }
});

And this works like a charm . Happy coding guyzz !! :)