我有一个简单的可拖动文本区域元素的以下代码:
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 x 0px 并被拖动。如果鼠标位于调整大小 handle 上，我的 onmousemove 函数如何返回？
最佳答案
计算元素调整大小 handle 所在位置的大小和部分。您可以使用 element.getBoundingClientRect() 使用元素偏移高度、宽度和页面位置来获取该区域的相对位置。
一旦找到这些边界，它就会变成我的指针是否在我定义为不可拖动的框内？
关于JavaScript - 忽略鼠标是否位于文本区域的 "resize handle"上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53875642/