1. 问题背景：拖拽与调整大小的冲突
在web开发中，我们经常需要创建可交互的ui元素，例如一个既能被用户拖动到任意位置，又能调整其尺寸的文本框（textarea）。然而，当同时实现拖拽和原生调整大小功能时，一个常见的挑战是它们之间的事件冲突。通常情况下，mousedown事件既会触发拖拽逻辑，也会在元素右下角区域触发原生的调整大小手柄。如果不对用户意图进行区分，拖拽事件会覆盖调整大小事件，导致用户无法正常调整元素大小。
2. 初始设置：HTML结构与CSS样式
首先，我们需要一个基本的HTML结构来承载我们的可拖拽和可调整大小的textarea。
可拖拽与调整大小的文本框
在上述代码中：
- .move 类定义了一个绝对定位的容器，这是我们实现拖拽功能的目标。
- textarea 元素初始设置 resize: none，以避免在容器未准备好时出现调整大小手柄。
- .editable_resize 类用于动态地为 textarea 启用 resize: both 和 overflow: auto，从而激活浏览器原生的调整大小功能。
3. 实现拖拽功能
接下来，我们编写JavaScript代码来实现元素的拖拽功能。
// 辅助函数：跨浏览器事件绑定
function addEvent(el, type, callback) {
if (el.addEventListener) {
el.addEventListener(type, callback);
} else if (el.attachEvent) {
el.attachEvent("on" + type, callback);
}
}
// 拖拽函数
function Dragable(el) {
var isMove = false, // 标记是否正在拖动
x = 0, y = 0, // 鼠标按下时的坐标
xel = 0, yel = 0; // 元素相对于视口的偏移
addEvent(el, "mousedown", function (e) {
// 在这里，我们将添加一个判断，以避免与resize冲突
// ... (稍后添加)
isMove = true;
el.classList.add("isMoving"); // 添加拖动样式
// 获取鼠标按下时的坐标
x = window.event ? window.event.clientX : e.pageX;
y = window.event ? window.event.clientY : e.pageY;
// 计算鼠标相对于元素左上角的偏移量
xel = x - el.offsetLeft;
yel = y - el.offsetTop;
});
addEvent(document, "mousemove", function (e) {
if (isMove) {
e.preventDefault(); // 阻止默认行为，如文本选择
// 获取当前鼠标坐标
x = window.event ? window.event.clientX : e.pageX;
y = window.event ? window.event.clientY : e.pageY;
// 更新元素位置
el.style.left = (x - xel) + 'px';
el.style.top = (y - yel) + 'px';
}
});
addEvent(document, "mouseup", function () {
el.classList.remove("isMoving"); // 移除拖动样式
isMove = false;
});
}
// 页面加载完成后初始化拖拽功能
window.onload = function () {
// 假设有其他元素需要隐藏
let backCards = document.querySelectorAll(".back_card");
for (let i = 0; i < backCards.length; i++) {
backCards[i].style.display = "none";
}
// 为所有具有 .move 类的元素添加拖拽功能
let moveElements = document.querySelectorAll(".move");
for (let i = 0; i < moveElements.length; i++) {
Dragable(moveElements[i]);
}
};4. 启用原生调整大小功能
为了让 textarea 能够调整大小，我们通过一个 onclick 事件来动态添加或移除 editable_resize 类。
立即学习“前端免费学习笔记（深入）”；
// 切换textarea的调整大小能力
function change_editable(e){
// 兼容不同浏览器获取事件源的方式
let id_element;
try {
id_element = e.srcElement.id.toString();
} catch {
id_element = e.path[0].id.toString();
}
const element = document.getElementById(id_element);
element.classList.toggle("editable_resize"); // 切换类
}5. 解决拖拽与调整大小的冲突
当前代码的问题在于，当鼠标点击 textarea 的右下角（原生调整大小手柄区域）时，Dragable 函数中的 mousedown 事件仍然会被触发，导致拖拽开始，从而阻止了原生的调整大小操作。
解决此问题的关键在于：在 Dragable 函数的 mousedown 事件处理程序中，判断鼠标点击的位置。如果点击位置在元素的右下角特定区域（即原生调整大小手柄的有效区域），则我们不应该启动拖拽，而是允许浏览器处理原生的调整大小事件。
我们可以在 mousedown 事件的开头添加一个条件判断：
// 修改后的Dragable函数
function Dragable(el) {
var isMove = false,
x = 0, y = 0,
xel = 0, yel = 0;
addEvent(el, "mousedown", e => {
const rect = e.target.getBoundingClientRect(); // 获取事件目标元素的尺寸和位置
const _x = e.clientX - rect.left; // 鼠标相对于元素左边缘的X坐标
const _y = e.clientY - rect.top; // 鼠标相对于元素上边缘的Y坐标
// 定义一个“调整大小区域”的阈值，例如右侧和底部18像素
// 如果鼠标点击在这个区域内，则认为是尝试调整大小，不启动拖拽
const RESIZE_THRESHOLD = 18;
if (rect.width - _x <= RESIZE_THRESHOLD && rect.height - _y <= RESIZE_THRESHOLD) {
return; // 阻止拖拽操作，让浏览器处理原生resize
}
isMove = true;
el.classList.add("isMoving");
x = window.event ? window.event.clientX : e.pageX;
y = window.event ? window.event.clientY : e.pageY;
xel = x - el.offsetLeft;
yel = y - el.offsetTop;
});
addEvent(document, "mousemove", function(e) {
if (isMove) {
e.preventDefault();
x = window.event ? window.event.clientX : e.pageX;
y = window.event ? window.event.clientY : e.pageY;
el.style.left = (x - xel) + 'px';
el.style.top = (y - yel) + 'px';
}
});
addEvent(document, "mouseup", function() {
el.classList.remove("isMoving");
isMove = false;
});
}解释修改点：
- e.target.getBoundingClientRect(): 获取当前事件目标（即被点击的元素，可能是textarea）在视口中的大小和位置。
- _x 和 _y: 计算鼠标点击点相对于 textarea 元素左上角的局部坐标。
- RESIZE_THRESHOLD: 定义一个常量，表示右下角多少像素的区域被认为是调整大小手柄。通常浏览器原生的调整大小手柄区域大约在16-20像素。
- 条件判断 if (rect.width - _x :
- rect.width - _x 计算鼠标距离元素右边缘的距离。
- rect.height - _y 计算鼠标距离元素下边缘的距离。
- 如果鼠标距离右边缘和下边缘都在 RESIZE_THRESHOLD 范围内，说明鼠标点击在右下角的调整大小区域。
- return;: 在上述条件下，直接从 mousedown 事件处理程序返回，不执行后续的拖拽逻辑。这样，浏览器就可以捕获到这次点击并启动原生的调整大小操作。
6. 完整代码示例
将所有代码整合到一起，形成一个完整的可运行示例：
可拖拽与调整大小的文本框
7. 注意事项与总结
- RESIZE_THRESHOLD 的选择: 18px 是一个经验值，与大多数浏览器原生调整大小手柄的宽度相匹配。如果需要更精确的控制，可以根据实际测试调整此值。
- 多方向调整大小: 当前的解决方案利用了浏览器原生的 resize: both 功能，它通常在右下角提供一个手柄。如果需要自定义在元素边缘任意方向进行调整大小，则需要实现更复杂的自定义resize逻辑，例如在元素的四个角和四条边上放置独立的resize手柄，并为每个手柄编写独立的mousedown/mousemove/mouseup逻辑。
- 性能优化: 对于大量可拖拽/可调整大小的元素，可以考虑使用事件委托来减少事件监听器的数量，或者使用更现代的API（如 Pointer Events 或 Intersection Observer，尽管后者不直接用于拖拽/resize）。
- 用户体验: 考虑在鼠标悬停在调整大小区域时改变鼠标光标样式（例如 cursor: nwse-resize），以提供更好的用户反馈。这可以通过CSS的:hover伪类结合JavaScript动态添加类来实现。
- 可访问性: 对于需要高度可访问性的应用，应考虑为拖拽和调整大小功能提供键盘操作支持。
通过在 mousedown 事件中智能地判断鼠标位置，我们成功地解决了拖拽和原生调整大小功能之间的冲突，使得用户可以流畅地拖动和调整 textarea 元素的大小。这种方法提供了一种简单而有效的方式来增强Web应用的交互性。
