JavaScript - игнорировать, если мышь находится на «ручке изменения размера» текстовой области

Question

У меня есть следующий код для простого перетаскиваемого элемента textarea:

HTML:

<textarea type="text" onmousedown="mouseDown(this)"></textarea>

JavaScript:

const mouseDown = element => {

    document.onmousemove = e => {
        element.style.left = `${e.pageX}px`;
        element.style.top = `${e.pageY}px`;
    }
}

document.onmouseup = () => document.onmousemove = null;

Это прекрасно работает, кроме одногопроблема.Попытка изменить размер элемента, так как это textarea, делает его 0px на 0px и перетаскивается.Как может onmousemove функционировать return, если мышь находится на ручке изменения размера?

Answer 1

Рассчитать размер и сечение, где находится ручка изменения размера элементов.Вы можете получить относительное местоположение этой области, используя высоту смещения элементов и ширину страницы, используя element.getBoundingClientRect().

После того, как вы нашли эти границы, он просто становится - мой указатель внутриящик, который я определил как не перетаскиваемый?