Javascript 将可调整大小的图标粘贴到动态大小的div的底部

我正在尝试处理一个由鼠标悬停信息填充的div

它填充到的div既可以调整大小也可以拖动，而且工作正常。我的小问题是，当长方体弯曲时，可调整大小的图标保持在原来的位置

我想看看是否可以使可调整大小的图标在div增大时保留在其底部

$（“.btn”）.mouseenter（函数（）{
$（“#thepom”）.html（$（this.val（））；
});
$（“.btn”）.mouseleave（函数（）{
$（“#thepoem”）.empty（）；
});
$（“#superresizebleDiv”）.resizeable（）；
$（“#SuperresizebleDiv”）.draggable（）
#超大尺寸{
位置：绝对位置；
最高：15%；
左：5%；
最小宽度：250px；
最小高度：50px；
背景色：#5fc0e3；
边框左上半径：10px；
边框左下半径：10px；
边框右上角半径：10px；
z指数：1
}
#thepoem{
显示器：flex；
显示：继承；
最小高度：50px；
最小宽度：250px；
背景色：#5fc0e3；
边框左上半径：10px；
边框左下半径：10px；
边框右上角半径：10px；
}

乌鸦诗1
乌鸦诗2
您需要更新mouseenter上的
#SuperResizebleDiv
高度，并重置mouseleave上的高度


var高度=”；
$（“.btn”）.mouseenter（函数（）{
高度=$（“#SuperresizebleDiv”）.outerHeight（）；
$（“#thepom”）.html（$（this.val（））；
$（“#SuperresizebleDiv”）.高度（$（“#thepoem”）.外部高度（）
});
$（“.btn”）.mouseleave（函数（）{
$（“#thepoem”）.empty（）；
$（“#SuperresizebleDiv”）.高度（高度）
});
$（“#superresizebleDiv”）.resizeable（）；
$（“#SuperresizebleDiv”）.draggable（）
#超大尺寸{
位置：绝对位置；
最高：15%；
左：5%；
最小宽度：250px；
最小高度：50px；
背景色：#5fc0e3；
边框左上半径：10px；
边框左下半径：10px；
边框右上角半径：10px；
z指数：1
}
#thepoem{
显示器：flex；
显示：继承；
最小高度：50px；
最小宽度：250px；
背景色：#5fc0e3；
边框左上半径：10px；
边框左下半径：10px；
边框右上角半径：10px；
}

乌鸦诗1
乌鸦诗2
谢谢！它起作用了。我接受了你的回答！这导致了另一个意想不到的问题，div当然会返回到原始大小
$（“#superresizeblediv”）。height（height）
，现在我想知道如果我调整框的高度，它会将最小高度设置为不小于我拖动它的位置。宽度不会缩小，但高度会缩小。提示？我不确定我是否理解你想要实现的目标。目前，该框将返回高度-即使调整大小-它是在文本填充之前。是的，它有点复杂。其思想是，可以通过单击并拖动控制柄来调整长方体的大小，但当长方体清空时，它将恢复为“最小高度”属性。我想知道，通过手动将调整大小手柄拖动到一个新的高度，比如说500px，它会设置css，这样在我再次拖动之前，框不会收缩到500px以下