javascript - 当元素被放入其中时，使可放置的 div 展开。使用可拖动的 jquery ui

Question

您好，我有一个可拖动的 div 和一个可放置的 div，我希望这样当我在可放置的 div 中放置一个 div 时，可放置的 div 会扩展以包含放置的 div。现在它溢出来了。我尝试实现外包装。我还尝试实现 display:inline block ，因为我听说如果您对父级执行此操作，则父级的大小将是内部内容。

脚本:

$(document).ready(function(){
    $("#draggable2").draggable({
        // opacity : 0.7, 
        helper:"clone",
        scope: 1,
        start: function(e, ui){
            $(ui.helper).addClass("drag-helper");
            console.log(ui);
        }
    })
    $("#droppable").droppable({
        drop: function(){
            var cloned = $("#draggable2").clone().css({"margin" : "0"})
            $(this).css("background-color" , "green");
            if($(".outerwrapper").length == 0){
                $(this).wrapInner("<div class = 'outerwrapper'></div>");                    
            }
                $(".outerwrapper").append(cloned)

        },
        scope: 1
    })
});

CSS:

#draggable2{
width: 90px;
height: 90px;
padding: 0.5em;
border :5px solid gray;
background-color: red;
display: inline-block;
margin-right: 50px;
vertical-align:middle; 
}
#droppable{
width: 120px;
height: 120px;
padding: 0.5em;
border :5px solid black;
background-color: #777;
display: inline-block;  
vertical-align:middle; 
}
.drag-helper{
width: 50px;
height: 50px;
padding: 0.5em;
border :5px solid gray;
background-color: red;
display: inline-block;
margin-right: 50px;
vertical-align:middle; 
opacity: 0.5;
border-radius: 100%;        
}
.outerwrapper{
width: 100%;
height: 100%;
display: inline-block;
}

fiddle显示当您将可拖动的 div 多次拖放到下拉框上时，它们会溢出。我希望他们被收容。我可能希望它们水平或垂直包含。所以也许它们可以漂浮在外容器内，或者沿着 div 向下堆叠。

提前谢谢你。

Answer 1

你可以添加这个:

$(this).css("height", "100%");

到您的 jQuery 代码之后:

$(".outerwrapper").append(cloned)

这是经过编辑的 JSFiddle，供您审阅:http://jsfiddle.net/zLzR9/1/