Question

嗨我有一个可拖动的div和一个可放置的div我希望这样当我在droppable div中放一个div时，dropable 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/

Answer 2

只需改变这行css：

#droppable {
        …
        height: 120px;
        …
    }

到：

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

同样适用于宽度。

当元素放入其中时，使droppable div扩展。使用draggable jquery ui

2 个答案: