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
    }
});

这就像一个魅力。快乐的编码guyzz !! ：）

可拖动克隆对象

1 个答案: