从另一个div的内部拖放一个div [英] Drag and Drop a div from the inside of another div

问题描述

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

I'm trying the drag and drop function of jQuery UI but how can I drag a div1 inside a div2 and drop in div3 like this.

我的当前代码是这样的

css:

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

脚本:

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

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

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

My code doesn't seem able to drag the div1 to div3

推荐答案

如果您希望将实际的DOM元素移动到新元素中，则可以执行以下操作(我不确定是否有超级幻想jQuery UI方式):

If you're wanting the actual DOM element to be moved into the new one you can do something like this (I'm not sure if there's a super fancy jQuery UI way):

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

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

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

Basically this will detach the draggable element from the DOM on the drop and append it to the droppable element.

放置元素后，您要从元素中删除其位置(相对位置和顶部/左侧)，否则该元素的位置将很奇怪.

You'll want to remove the positioning (relative and top/left) from the element after you drop it otherwise it will be positioned weird.

这篇关于从另一个div的内部拖放一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！