javascript - 从另一个 div 内部拖放一个 div

Question

我正在尝试拖放功能，jQuery UI但我怎样才能像这样将a拖入adiv1并div2放入div3。

我当前的代码是这样的

CSS：

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

脚本：

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

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

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

Answer 1

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

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

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

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

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