可拖动克隆对象有问题

Question

我从过去的 5-6 小时开始挖掘，真的有麻烦了。我面临 draggable 个对象的问题。我正在尝试的是我有一个包含 18 个小的可拖动 div 的弹出窗口。我需要将那些可拖动的项目从弹出窗口中一个一个地拖放到我的文档正文中。弹出窗口不是 bootstrap 弹出窗口，它实际上会冻结文档中的所有内容，除非您不关闭它。所以这是一个简单的弹出窗口。到目前为止我尝试过的是：-

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

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

它正在成功创建克隆，甚至我也可以拖动克隆对象。但是当我把它放到 divGeneralLayOutContentBody(this is my entire document 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 !! :)

可拖动克隆对象有问题

Having problems with draggable clone object

jquery

jquery-ui-draggable

jquery-ui-droppable

jquery-droppable

jquery-draggable