With CSS' resize rule, one can allow an element to be resized like so:
.someClass {
resize: vertical/horizontal/both
}
However, I'm unable to find a way to detect an element is being resized.
HTML' Drag and Drop API has built-in events to detect dragging which are documented here.
Is there a similar way I can detect when an element is being dragged, or make my own version?
You need to get the element by a selector. For example:
const element = document.querySelector('.someClass');
And then you can use resizeObserver:
const resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
console.log(entry)
}
console.log('Size changed');
});
resizeObserver.observe(element);
For more resources: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver