HTML拖拽和调整大小冲突解决办法

一分耕耘，一分收获！既然打开了这篇文章《HTML拖拽与调整大小冲突解决方法》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

本文旨在解决网页开发中常见的HTML元素拖拽（Drag）功能与浏览器原生调整大小（Resize）功能之间的冲突。通过在拖拽事件的mousedown处理程序中引入鼠标位置判断，精确区分用户意图是拖拽还是调整大小，从而避免事件重叠，实现一个既可自由拖动又可正常调整大小的textarea元素。

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;
    });
}

解释修改点：

1. e.target.getBoundingClientRect(): 获取当前事件目标（即被点击的元素，可能是textarea）在视口中的大小和位置。
2. _x 和 _y: 计算鼠标点击点相对于 textarea 元素左上角的局部坐标。
3. RESIZE_THRESHOLD: 定义一个常量，表示右下角多少像素的区域被认为是调整大小手柄。通常浏览器原生的调整大小手柄区域大约在16-20像素。
4. 条件判断 if (rect.width - _x <= RESIZE_THRESHOLD && rect.height - _y <= RESIZE_THRESHOLD):
   • rect.width - _x 计算鼠标距离元素右边缘的距离。
   • rect.height - _y 计算鼠标距离元素下边缘的距离。
   • 如果鼠标距离右边缘和下边缘都在 RESIZE_THRESHOLD 范围内，说明鼠标点击在右下角的调整大小区域。
5. 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应用的交互性。

理论要掌握，实操不能落！以上关于《HTML拖拽和调整大小冲突解决办法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！