如何用Vanilla JS实现可拖拽且可调整大小的DIV组件

已知在jQuery环境中可以实现DIV的拖拽与调整大小功能结合，但现在需要用Vanilla JS（原生JavaScript）实现以下两种场景的可拖拽+调整大小DIV：

• 场景1：带头部结构的DIV
  将头部作为拖拽手柄，右下角设置调整手柄，用户操作逻辑清晰，此场景无功能冲突问题。

• 场景2：仅含单一内容的DIV
  若将整个盒子作为拖拽手柄，点击右下角调整手柄时会被识别为拖拽事件，导致无法正常调整大小，此场景存在功能冲突，需要解决。

测试代码如下：

<h2>Test resizeable and moveable</h2>
<h4>Block1 without header</h4>
<div class="area">
    <div class="block freemover">
        <p>Lorem ipsum dolor sit amet ...</p>
    </div>
</div>
<h4>Block2 with header</h4>
<div class="area">
    <div class="block freemover">
        <h4 class="anchor">Move me</h4>
        <p>Duis autem vel eum iriure dolor ...</p>
    </div>
</div>

诚邀各位提供可行的解决方案。

内容的提问来源于stack exchange，提问作者RanneR