可拖放的克隆对象有问题

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应用。但当我继续拖动clonee对象时，这种情况也发生了变化。

任何帮助都将不胜感激。

这就是我说的弹出式。您可以看到可拖动的项目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
    }
});

这就像一种魅力。快乐编码!！:)