从另一个 div 内部拖放一个 div答案

【问题标题】：Drag and Drop a div from the inside of another div从另一个 div 内部拖放一个 div
【发布时间】：2013-11-18 13:05:05
【问题描述】：

我正在尝试jQuery UI 的拖放功能，但是如何将div1 拖放到div2 中并像这样放入div3。

我现在的代码是这样的

css:

#div2 {
     height: 52em !important;
     min-height: 50em;
     overflow:hidden;
}

脚本：

$( function() {
    $('#div1').draggable({
        containment: '#div4'
    });

    $('#div3').droppable();
});

我的代码似乎无法将div1 拖到div3

【问题讨论】：

这可能有助于 Droppable - jqueryui.com/droppable/#photo-manager
@dekdev <ul> 内部没有将其与放置目标 div 分开的 div。请在问题中查看我的图片
这是在 div 里面 - jqueryui.com/droppable/#default
那个 div 里面的东西是<p> 标签并且不可拖动。那里的可拖动容器是<div>它自己。

标签： javascript jquery css jquery-ui drag-and-drop

【解决方案1】：

如果您希望将实际的 DOM 元素移动到新元素中，您可以执行以下操作（我不确定是否有一种超级花哨的 jQuery UI 方式）：

$( function() {
    $('#div1').draggable({
        containment: '#div4'
    });

    $('#div3').droppable({ drop: function(e, opts) { 
        $(this).append(opts.draggable.detach());
    }});
});

基本上，这会将draggable 元素从拖放的DOM 中分离出来，并将其附加到droppable 元素。

您需要在放置元素后从元素中移除定位（相对和顶部/左侧），否则它的定位会很奇怪。

【讨论】：