Drag and Drop a div from the inside of another div

问题

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. 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

回答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.

来源：https://stackoverflow.com/questions/19826568/drag-and-drop-a-div-from-the-inside-of-another-div

标签

javascript