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

Question

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.

My currrent code is like this

css:

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

script:

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

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

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

Answer 1

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());
    }});
});

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.