Javascript 用户操纵的框架-HTML/CSS/JS

加载后，如何使下面的框架允许用户拖动和缩放大小？这在HTML/CSS/JS中可能吗

<script>
    var frame;
    function addFrame() {
       frame = document.createElement('iframe');
       frame.height = "200px";
       frame.width = "200px";
       frame.setAttribute('id', 'superFrame');
       document.body.appendChild(frame);
    }
    function loadGoogle() {
       frame.setAttribute('src','http://www.google.com')
    }
</script>

var框架；
函数addFrame（）{
frame=document.createElement（'iframe'）；
frame.height=“200px”；
frame.width=“200px”；
setAttribute（'id'，'superFrame'）；
document.body.appendChild（框架）；
}
函数loadGoogle（）{
frame.setAttribute（'src'，'http://www.google.com')
}

左边是我拥有的，右边是我想要的，但是用户通过拖动框架来设置大小

src

删除宽度和高度属性

为iframe设置父div

使包含的div响应，并使iframe具有以下尺寸/定位规则：

iframe{ 位置：绝对位置； 排名：0； 左：0； 宽度：100%； 身高：100%； }