Search code examples
javascripthtmltextareaonmousedownonmousemove

JavaScript - Ignore if mouse is on a textarea's "resize handle"

I have the following code for a simple draggable textarea element:

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;

This works great, except for one problem. Trying to resize the element, since it's a textarea, makes it become 0px by 0px and gets dragged around. How can my onmousemove function return if the mouse is on the resize handle?

Solution

  • Calculate the size and section of where the elements resize handle is. You can get the relative location of this area by using the elements offset height, width and page location using element.getBoundingClientRect().

    Once you've found those boundaries, it simply becomes is my pointer inside of the box which I've defined to be non draggable?