Javascript 拖放后div大小增加

这是我的JSFIDLE：

将“rule/event”类拖放到“layout”类后，我希望“rule/event”的大小与“rule body/event body”类中的大小相同

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

是否因为“规则主体/事件主体”和“布局”类的高度百分比（%）不同

这有什么办法

---

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

因为您使用的是

身高：8%；宽度：50%这些规则与父项高度/宽度相关，在拖放父项后，更改了父项，因此，高度/宽度的结果不同

使用固定的
宽度/高度
或使用
vw/vh

解决方案：

哇！非常感谢：）@IncharaRaveendra没问题，很高兴为您提供帮助删除规则/事件组件后，如果我调整窗口大小，组件将位于布局之外，如何更正？我如何使它响应？当然，最后一件事是，当我拖放到布局中，组件被放置在布局中间的某个地方。为什么在我拖动它的地方（光标/指针位置）不发生下落？@IncharaRaveendra我只能想到使用vw/vh，比如：，理想的解决方案应该是克隆元素，元素应该遵循左侧框中的高度和宽度（使用js更新窗口大小）
.rule-body, .event-body{    
    height: 85%;
    margin-top: 5%;
    overflow-y: scroll;
}

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

.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;
}