從另一個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元素移動到新元素中，則可以執行以下操作（我不確定是否有一種超贊的jQuery UI方法）：

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

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

基本上，這將從拖放上的DOM中分離出draggable元素，並將其附加到droppable元素上。

放置元素后，您需要從元素中刪除其位置（相對位置和頂部/左側），否則該元素的位置將很奇怪。