Как объединить возможность изменения размера и перетаскивание с помощью Vanilla JS ⇐ CSS

[Anonymous]

Из раздела «Невозможно одновременно использовать DRAGGABLE, RESIZEABLE и SELECTABLE» видно, что возможность изменения размера и перетаскивания можно комбинировать для DIV в среде jQuery.

Однако у меня возник вопрос, как создать изменяемый размер и перетаскиваемый элемент DIV с помощью Vanilla JS.

Это легко, если у div есть структура, например. с заголовком, то только заголовок может быть пользователем в качестве маркера для перетаскивания, а маркер изменения размера в правом нижнем углу может быть доступен пользователю для изменения размера. Для пользователя легко понять, что ему нужно нажать на заголовок, если он хочет перетащить весь блок.

Если элемент div имеет только одно содержимое, весь блок должен использоваться в качестве дескриптора для перетаскивания с побочным эффектом: щелчок по дескриптору изменения размера интерпретируется как событие перетаскивания, и изменение размера невозможно.

Небольшая тестовая программа для этих двух случаев: https://jsfiddle.net/RanneR/skLvtehc/7/

Протестируйте возможность изменения размера и перемещения Блок1 без заголовка Lorem ipsum dolor sit amet...
Блок2 с заголовком Перемести меня
Duis autem vel eum iriure dolor...

Любые идеи приветствуются.