1

嗨，我有一个可拖动的 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;
}

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

先感谢您。

4

2 回答 2

1

只需更改这行 css：

#droppable {
        …
        height: 120px;
        …
    }

至 ：

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

这同样适用于宽度。

于 2013-10-15T11:54:14.437 回答
1

你可以添加这个：

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

在以下之后添加到您的 jQuery 代码：

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

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

于 2013-10-15T05:12:35.083 回答