javascript - 拖放后div大小增加

Question

这是我的 jsfiddle:My fiddle

将“规则/事件”类拖放到“布局”类后，我希望“规则/事件”的大小与“规则主体/事件主体”类中的大小相同。

当放入“布局”类时，它的大小会成倍增加。

是不是因为“rule-body/event-body”和“layout”类的高度百分比(%)不同？

.rule-body, .event-body{    
    height: 85%;
    margin-top: 5%;
    overflow-y: scroll;
}

.layout{
    height: 100%;
    background-color: #ececec;
}

解决这个问题的方法是什么？

任何帮助将不胜感激。谢谢!

Answer 1

由于您使用的是 height: 8%; width: 50%; 这些规则与父级的高度/宽度有关，拖放父级后更改，因此，您会得到不同的高度/宽度结果。

使用固定的width/height 或使用vw/vh

解决方案:https://jsfiddle.net/dalinhuang/0tdnmghr/

.rule{
    height: 25px;
    width: 100px;
    background-color: #aaa;
    text-align: center;
    margin-bottom: 5%;
    border: 1px solid black;
}
.event {
    height: 25px;
    width: 100px;
    background-color: #aaa;
    text-align: center;
    margin-bottom: 5%;
    border: 1px solid black;
}