可拖动克隆对象出现问题

Question

我过去 5-6 小时一直在挖掘，确实遇到了麻烦。我面临

draggable

对象的问题。我正在尝试的是我有一个包含 18 个小的可拖动 div 的弹出窗口。我需要将弹出窗口中的可拖动项目一一拖放到我的文档正文中。该弹出窗口不是引导程序窗口，它实际上会冻结文档中的所有内容，除非您不关闭它。所以这是一个简单的弹出窗口。到目前为止我尝试过的是：-

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

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

它正在成功创建克隆，甚至我也可以拖动克隆对象。但是当我将它放到

divGeneralLayOutContentBody

（这是我的整个文档ID）时，克隆对象会附加到错误的位置。有时我什至看不到它们，但当我打开调试器工具时，我可以在 DOM 中看到它们。

还有一件事，我对可拖动项目应用了一些CSS。我已将

top

和

left

设置为可拖动项目，以便它们在弹出窗口中正确对齐。我不确定这是否会导致克隆问题，因为当我创建克隆时，显然它也应用了相同的 css 。但当我继续拖动克隆对象时，情况也会发生变化。

任何帮助将不胜感激。

这就是我正在谈论的弹出窗口。您可以看到可拖动的项目 1,2,3,...18

http://prntscr.com/8c3dz9

Answer 1

好吧，终于我成功了。这是我尝试过的解决方案

$("#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
    }
});