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

【问题标题】：Make a droppable div expand when elements are dropped inside it. using draggable jquery ui当元素被放入其中时，使可放置的 div 展开。使用可拖动的 jquery ui
【发布时间】：2013-10-15 04:52:09
【问题描述】：

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

脚本：

$(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 向下堆叠。

提前谢谢你。

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

你可以添加这个：

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

到你的 jQuery 代码之后：

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

这是编辑后的 JSFiddle 供您查看：http://jsfiddle.net/zLzR9/1/

【讨论】：

【解决方案2】：

只需更改这行css：

#droppable {
        …
        height: 120px;
        …
    }

到：

#droppable {
        …
        min-height: 120px;
        …
    }

同样适用于宽度。

【讨论】：