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

Question

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

我现在的代码是这样的

CSS:

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

脚本:

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

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

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

Answer 1

如果您想要将实际的 DOM 元素移动到新的元素中，您可以这样做(我不确定是否有 super 花哨的 jQuery UI 方式):

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

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

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

您需要在删除元素后移除元素的定位(相对和顶部/左侧)，否则它的位置会很奇怪。