JavaScript

Question

我有以下用于简单可拖动文本区域元素的代码：

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().

的元素偏移高度、宽度和页面位置来获取该区域的相对位置

一旦找到这些边界，它就变成了我的指针在我定义为不可拖动的框内吗？

JavaScript - 如果鼠标在文本区域上则忽略 "resize handle"

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

html

textarea

onmousemove

onmousedown